React入门指南-CSDN博客

本文链接：https://blog.csdn.net/qq_22400315/article/details/72828870

1.HTML 模板

<!DOCTYPE html>
<html>
    <head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
    </head>
<body>
<div id="example"></div>
<script type="text/babel">
  // ** Our code goes here! **
</script>
</body>
</html>

首先，最后一个

2.ReactDOM.render()

//将一个 h1 标题，插入 example 节点
<body>
<div id="example"></div>
<script type="text/babel">

//
  ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
  );
//

</script>

3.JSX 语法

HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写

 <script type="text/babel">
  var names = ['Alice', 'Emily', 'Kate'];
  ReactDOM.render(
    <div>
    {
      names.map(function (name, index) {
        return <div key={index}>Hello, {name}!</div>
      })
    }
    </div>,
    document.getElementById('example')
  );
</script>

4.组件

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类

var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});

ReactDOM.render(
 <HelloMessage name="John" />,
  document.getElementById('example')
);

上面代码中，变量 HelloMessage 就是一个组件类。模板插入时，会自动生成 HelloMessage 的一个实例（下文的”组件”都指组件类的实例）。所有组件类都必须有自己的 render 方法，用于输出组件。\
注意，组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会报错。

5.this.props.children

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点

var NotesList = React.createClass({
 render: function() {
return (
  <ol>
  {
    React.Children.map(this.props.children, function (child) {
      return <li>{child}</li>;
    })
  }
  </ol>
);
 }
});

ReactDOM.render(
 <NotesList>
<span>hello</span>
<span>world</span>
 </NotesList>,
 document.body
);

这里需要注意， this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。

6.PropTypes

组件的属性可以接受任意值，字符串、对象、函数等等都可以。

var MyTitle = React.createClass({
 propTypes: {
title: React.PropTypes.string.isRequired,
 },

 render: function() {
    return <h1> {this.props.title} </h1>;
  }
});

7.获取真实的DOM节点

8.this.state

组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI

var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
 handleClick: function(event) {
this.setState({liked: !this.state.liked});
 },
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
  <p onClick={this.handleClick}>
    You {text} this. Click to toggle.
  </p>
);
 }
});

ReactDOM.render(
<LikeButton />,
 document.getElementById('example')
);

上面代码是一个 LikeButton 组件，它的 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
- 由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，==this.props== 表示那些一旦定义，就不再改变的特性，而 ==this.state== 是会随着用户互动而产生变化的特性。

9.表单

10.组件的生命周期

组件的生命周期分成三个状态：

Mounting    //已插入真实 DOM
Updating    //正在被重新渲染
Unmounting  //已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()

React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

React入门教程