React入门

刺骨的言语ヽ痛彻心扉 2023-06-27 12:38 3阅读 0赞

目前对React已初步入门，因此将自己学习的进行了总结，希望能够能够帮到更多的人，也希望大家一起交流学习进步，深入学习React

现在给大家以简单事例代码直接来看如何理解入门React

1.从实现Hello World入门React

任何一门语言入门，都是以Hello World显示来实现，学习React我们也以Hello World来实现。

HTML静态页面实现：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div>Hello World</div>

</body>

</html>

如何通过React来实现

<!DOCTYPE html>

<html>

<head>

<!-- 使用React需先引入对应js

react.js 核心库

react-dom.js 提供与DOM相关的功能

browser.js 将JSX语法转换为Javascript语法

\-->

</head>

<body>

ReactDOM.render(

<h1>Hello, world!</h1>,

document.getElementById('example')

);

</script>

</body>

</html>

2.了解JSX（javascript xml）语法

可以理解为React自己定义的一种语言，不影响功能，将HTML与javascript混写

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var names = \['Alice', 'Emily', 'Kate'\];

ReactDOM.render(

<div>

names.map(function(name) \{

return <div>Hello, \{name\}!</div>

\})

</div>,

document.getElementById("container"));

</script>

</body>

</html>

3.认识React的组件component

组件其实很简单，就是类似于将对应的内容封装，然后应用，React的组件创建方法为React.createClass()，以第一步的Hello World为例，提取为组件，然后插入对应的位置

<!DOCTYPE html>

<html>

<head>

</head>

<body>

// 定义一个组件名，注意组件名首字母要大些

var HelloWorld = React.createClass(\{

render: function() \{

return <h1>Hello Wolrd!</h1>

\});

ReactDOM.render(

<HelloWorld />,

document.getElementById("container"));

</script>

</body>

</html>

4.有了组件的认识，我们尝试在组件中添加样式、通过组件模板设置属性，在组件中获取等栗子

<!DOCTYPE html>

<html>

<head>

.clr \{

color:  red;

</style>

</head>

<body>

var HelloWorld = React.createClass(\{

render: function() \{

return <h1 className="clr">\{this.props.name\},Hello Wolrd!</h1>

\});

var HelloWorld1 = React.createClass(\{

render: function() \{

return <h1 style=\{ \{color: 'red'\}\}>\{this.props.name\},Hello Wolrd!</h1>

\});

var clr = \{

color: 'red'

var data = 123;

var HelloWorld2 = React.createClass(\{

propTypes: \{

title: React.PropTypes.string.isRequired,

\},

render: function() \{

return <h1 style=\{clr\}>\{this.props.title\},Hello Wolrd!</h1>

\});

ReactDOM.render(

<div>

</div>,

document.getElementById("container"));

</script>

</body>

</html>

5.举了些栗子，需要了解下组件的声明周期

React有三个周期，Mount、Update、Unmount

![format_png][]

通过下面的执行顺序理解

![format_png 1][]

代码执行：

<!DOCTYPE html>

<html>

<head>

.clr \{

color:  red;

</style>

</head>

<body>

var HelloWorld = React.createClass(\{

getDefaultProps: function() \{

console.log("getDefaultProps");

return \{

name: "Jerry"

\};

\},

getInitialState: function() \{

console.log("getInitialState");

return \{

opacity: 1.0

\};

\},

componentWillMount: function() \{

console.log("componentWillMount");

\},

componentDidMount: function() \{

console.log("componentDidMount");

this.timer = setInterval(function() \{

var opacity = this.state.opacity;

opacity -= 0.5;

if(opacity< 0.1) \{

opacity = 1.0;

this.setState(\{

opacity: opacity

\});

\}.bind(this), 100);

\},

componentWillUpdate: function(nextProps, nextState) \{

console.log("componentWillUpdate"+ ":" + nextProps + ":" + nextState);

\},

componentDidUpdate: function(prevProps, prevState) \{

console.log("componentDidUpdate"+ ":" + prevProps + ":" + prevState);

\},

componentWillUnmount: function() \{

console.log("componentWillUnmount");

\},

render: function() \{

console.log("render");

return <h1 className="clr" style=\{ \{opacity: this.state.opacity\}\}>\{this.props.name\},Hello Wolrd!</h1>

\});

ReactDOM.render(

<HelloWorld />,

document.getElementById("container"));

</script>

</body>

</html>

执行结果：

此代码在componentDidMount方法通过定时器来调整state变化，执行打印结果：

embedded:5 getDefaultProps

embedded:12 getInitialState

embedded:19 componentWillMount

embedded:49 render

embedded:23 componentDidMount

embedded:37 componentWillUpdate:\[object Object\]:\[object Object\]

embedded:49 render

embedded:41 componentDidUpdate:\[object Object\]:\[object Object\]

embedded:37 componentWillUpdate:\[object Object\]:\[object Object\]

embedded:49 render

embedded:41 componentDidUpdate:\[object Object\]:\[object Object\]

embedded:37 componentWillUpdate:\[object Object\]:\[object Object\]

embedded:49 render

embedded:41 componentDidUpdate:\[object Object\]:\[object Object\]

发现执行顺序：

getDefaultProps  ---getInitialState  ---componentWillMount  ---render ---componentDidMount ---componentWillUpdate  ---render  ---componentDidUpdate

下面三个事件重复执行，由于state的修改，导致在周期Update过程中重复执行。

6.事件监听

<!DOCTYPE html>

<html>

<head>

.clr \{

color:  red;

</style>

</head>

<body>

var Input = React.createClass(\{

getInitialState: function() \{

return \{value: 'Hello!'\};

\},

handleChange: function(event) \{

this.setState(\{value: event.target.value\});

\},

render: function() \{

var value = this.state.value;

return <div>

<p>\{value\}</p>

</div>

\});

var ButtonEvent = React.createClass(\{

handleClick: function() \{

console.log(this.refs.tip.style.display);

if(this.refs.tip.style.display === 'none') \{

this.refs.tip.style.display = 'inline';

\} else \{

this.refs.tip.style.display = 'none';

event.stopPropagation();

event.preventDefault();

\},

render: function() \{

return <div>

<button onClick=\{this.handleClick\}>显示|隐藏</button><span ref="tip">测试按钮触发事件</span>

</div>

\});

ReactDOM.render(

<div>

</div>,

document.getElementById("container")

);

</script>

</body>

</html>

[format_png]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJpYTZpY09NbGlhZkR3TERGSG1UVHpuSFZYaWJsTVFtMUxPd3NTV1g5akgxQ2VYbzc5VG1QaWJhTlcyRmliODR0aWNBMnUzMzBjNnJTRVBZU21UQS8w?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJpYTZpY09NbGlhZkR3TERGSG1UVHpuSFZYUU9tVlJWV2ZDSnB4UmhuaWNoVGd0YmlhWVpuWUtITEVLSzJ0NGFsNnE4VjM2UGpKWlBCakZTdVEvMA?x-oss-process=image/format,png