React 基础（二）

系统管理员 2022-05-26 12:47 197阅读 0赞

### 一、ReactDOM.render() ###

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

以下实例中创建了 **LikeButton** 组件，getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>React 实例</title>
        <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    	<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    	<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
      </head>
      <body>
        <div id="example"></div>
        <script type="text/babel">
          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 ? '喜欢' : '不喜欢';
              return (
                <p onClick={this.handleClick}>
                  你<b>{text}</b>我。点我切换状态。
                </p>
              );
            }
          });
    
          ReactDOM.render(
            <LikeButton />,
            document.getElementById('example')
          );
        </script>
      </body>
    </html>

注意：

JSX是javascript的扩展，像Typescript,coffeeScript等一样，都是Javascript的语法糖，最终都要变编译成JS执行，建议使用JSX的代码进行React的开发。因为Javascript代码与JSX代码并不兼容，凡是使用JSX的地方我们都需要加上 type="text/babel"。

JSX比较特殊的是允许Javascript和HTML的混写

<head>
        <meta charset="UTF-8" />
        <title>菜鸟教程 React 实例</title>
        <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    	<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    	<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
      </head>
      <body>
      <div id="container"></div>
    
        <script type="text/babel">
        let value = "demo1";
        let buttonName = "submit";
          ReactDOM.render(
            <div>
              <input type="text" value={value}/> 
              <button>{buttonName}</button>
            </div>,
            document.getElementById("container")
          )
        </script>
      </body>
    </html>

ReactDOM.render(template,targetDOM),该方法接收两个参数：第一个是创建的模板，多个dom元素外层需使用一个标签进行包裹，如`<div>`；第二个参数是插入该模板的目标位置。若要为创建的某个元素增加class属性，不能直接定义class而要用`className`，因为class是javascript中的保留字。

例如给input添加className并更改样式：

<input type="text" className="userName" value={
       value}/> 
     
        .userName{background: yellow}//在CSS样式中定义

同样可以定义行内样式,将所有的样式包裹在一个对象中,以类似变量的形式给style属性赋值,注意样式属性要用驼峰命名法表示，如:backgroundColor而不是background-color;fongSize而不是font-size,

另外可以直接将样式赋值给一个变量，把变量赋值给style属性，如下：

<div id="container"></div> <script type="text/babel"> let value = "demo1"; let buttonName = "submit"; let inputStyle = { "backgroundColor":"yellow", "color":"red" }; ReactDOM.render( <div> <input type="text" style={inputStyle} value={value}/> <button>{buttonName}</button> </div>, document.getElementById("container") ) </script>

二、组件类

允许用户自由封装组件是React非常突出的特性，用户可将自己创建的组件像普通的HTML标签一样插入页面，`React.CreateClass`方法就是用来创建一个组件类的。在创建和调用react组件时有几点需要注意，我们在实际的demo中进行总结。  
从一个简单的例子开始，我们尝试创建一个包含文本框和提交按钮的组件：

<div id="container"></div> <script type="text/babel"> let InputWithButton = React.createClass({ render:function(){ return( <div> <input type="text" value="password"/> <button>Submit</button> </div> ) } }); ReactDOM.render( <InputWithButton/>, document.getElementById("container") ) </script>

运行上述代码，显示结果如下：  
![976193-20170612214944962-48471499.png][]  
在上述代码中，需要注意以下几点：

1.  我们创建了一个名为`InputWithButton`的组件类，**注意此处命名首字母必须大写**，自动生成`InputWithButton`实例。
2.  **所有的组件都必须要有自己的render方法，用以输出组件**。
3.  **在创建组件类时，return的最终结果内只能包含一个顶级标签**，如果我们在上例中去掉div标签直接返回`<input>`和`<button>`，代码会报错。
4.  组件的用法与原生HTML的用法一致，直接在ReactDOM.render中插入`<InputWithButton/>`,**注意"/"不能丢**，在jsx解析时会根据"/"判断标签的闭合。  
    另外，像原生的HTML标签一样，可以给组件添加属性，参考如下代码：

<div id="container"></div> <script type="text/babel"> let InputWithButton = React.createClass({ render:function(){ return( <div> <input type="text" value={this.props.value} className="input"/> <button>{this.props.name}</button> </div> ) } }); ReactDOM.render( <InputWithButton name="confirm" value="password"/>, document.getElementById("container") ) </script>

![976193-20170612215005650-2046567973.png][]

1.  如上例中调用`<InputWithButton/>`标签时，添加的name和value属性,**在创建组件类时，可以通过this.props对象是获取组件的属性**,在input通过this.props.value给value赋值，在button中通过this.props.name赋值，注意都要包裹在\{\}内。
2.  添加属性时需要注意添加class属性时要用className,for属性用htmlFor,这是因为class和for是JavaScript的保留字。  
    在使用this.props对象获取属性时，需要注意比较特殊的this.props.children，他表示组件的所有子节点。
    
        <div id="container"></div> <script type="text/babel"> let FormList = React.createClass({ render:function(){ return( <form> { React.Children.map(this.props.children,function(child){ return <button>{child}</button>; }) } </form> ) } }); ReactDOM.render( <FormList> <span>Submit</span> <span>Clear</span> <span>Cancel</span> </FormList>, document.getElementById("container") ) </script>
    
    如上代码，我们尝试创建一个包含三个按钮的form表单，在创建FormList组件类时，通过`this.props.children`获取FormList下的子元素，通过`React.Children.map`遍历节点。通过React专用的调试工具，我们可以查看FormList组件类的具体组成如下：

![70][]

**二、React 组件 API**

## 设置状态:setState ##

setState(object nextState[, function callback])

### 参数说明 ###

*  **nextState**，将要设置的新状态，该状态会和当前的**state**合并
 *  **callback**，可选参数，回调函数。该函数会在**setState**设置成功，且组件重新渲染后调用。

合并nextState和当前state，并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。

不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。

# React 组件生命周期 #

在本章节中我们将讨论 React 组件的生命周期。

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

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

生命周期的方法有：

*  **componentWillMount** 在渲染前调用,在客户端也在服务端。
 *  **componentDidMount** : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
 *  **componentWillReceiveProps** 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
 *  **shouldComponentUpdate** 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。  
    可以在你确认不需要更新组件时使用。
 *  **componentWillUpdate**在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
 *  **componentDidUpdate** 在组件完成更新后立即调用。在初始化时不会被调用。
 *  **componentWillUnmount**在组件从 DOM 中移除的时候立刻被调用。

[976193-20170612214944962-48471499.png]: /images/20220526/a7162318f2d44a90a7bf0d7f4b79f239.png
[976193-20170612215005650-2046567973.png]: /images/20220526/d073b0401653421c9cca562de331be88.png
[70]: /images/20220526/a913ede087904c0282623c49113183cd.png