React快速上手（四）表单数据绑定以及生命周期

上一篇介绍了react的列表渲染与条件渲染，这一篇会谈一谈react的表单数据绑定以及它的生命周期
与列表渲染和条件渲染类似，react实质上也没有提供表单数据绑定的指令，也就意味着它也需要通过自己的封装来完成对应效果。
react虽然没有提供对数据绑定的封装，却提出了一个叫做 受控组件 的概念。所谓受控组件，便是经过双向数据绑定将输入值和state里的值进行绑定的组件，通常来说，使用react开发，都会将表单元素封装成受控组件便于管理，但是让人有一点不能理解的就是 你tm都提出这个概念了，就不能帮我们封装一下吗…非要我们自己封装

表单数据绑定

文本输入框
文本输入框的数据绑定便是随着输入框value的改变，动态更改state中的值

class Myform extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            username:''
        };
    }
    // e指的是系统自动产生的事件对象
    // e.target指的是发生事件的元素
    handleNameChange=e=>{
        this.setState({
            // 使用属性名称表达式
            username:e.target.value
        })
    }

    render(){
            return(
                <form>
                    <p>
                        <label>用户名：</label> { this.state.username } <br />
                        <input type="text" value={this.state.username} onChange={this.handleNameChange} />
                    </p>
                </form>
            );
        }
    }

    ReactDOM.render(
        <Myform />, 
        document.getElementById('root')
    );

这样就完成了对一个表单元素的双向数据绑定，但通常不会只有一个表单元素，一个表单写一个方法虽然可以，但是没有必要，我们可以进行一个简单的修改

      class App extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
              username: "",
              password: ""
          };
        }
        handleInputChange = e => {
          // 在异步中获取事件对象需要调用e.persist()
          e.persist();
        	this.setState({
            // 使用属性名称表达式
            [e.target.name]:e.target.value
        	})
        };
        render() {
          return (
            <div>
              <input
                name="username"
                type="text"
                placeholder="用户名"
                value={this.state.userForm.username}
                onChange={this.handleInputChange}
              />
              <p>{this.state.userForm.username}</p>
              <input
                name="password"
                type="text"
                placeholder="密码"
                value={this.state.userForm.password}
                onChange={this.handleInputChange}
              />
              <p>{this.state.userForm.password}</p>
            </div>
          );
        }
      }
      ReactDOM.render(<App />, document.getElementById("root"));

在上面的例子中，有2个表单组件，我们给每一个都加了一个name属性，绑定的事件都是相同的一个handleInputChange事件，在这个事件中，通过属性名表达式，我们根据表单的name属性来确定具体要变更state中的哪个值，然后将value设置给对应的state中的值，这样就完成了对多个表单的数据绑定，后续要增加更多表单，只需要将表单的name值设置为state中的key即可

e.persist()
在上面的例子中，在handleInputChange内调用了一个e.persist()方法
如果需要在react中异步访问事件属性（如在setTimeout内），应该在是处理事件时调用e.persist()，否则事件对象只会获取到null，下面是官方文档的解释

多选框
多选框的数据对应一个数组，然后对应的值如果是已选中，点击是取消勾选，如果是未选中，点击则是勾选

class App extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
          	// 	选项
            list: ["唱", "跳", "rap", "打篮球"],
            // 选中的值
            selectedList: ["唱"],
          };
        }
        onCheckChange = (name) => {
          this.setState((state, props) => {
            let selList;
            if (state.selectedList.includes(name)) {
              // 如果选中的值内有本次点击的选项，则将该选项从选中的列表内去除
              selList = state.selectedList.filter((item) => item != name);
            } else {
              // 如果选中的值内没有本次点击的选项，则将该选项加至选中的列表内
              selList = [...state.selectedList, name];
            }
            return { selectedList: selList };
          });
        };
        render() {
          return (
            <div>
              <label>爱好:</label>
              {/* 遍历选项列表生成一组多选框 */}
              {this.state.list.map((item, index) => {
                return (
                  <label key={index}>
                  	// 根据选择的值中是否包含该选项来动态设置checked的值
                    <input
                      type="checkbox"
                      value={item}
                      checked={this.state.selectedList.includes(item)}
                      onChange={() => {
                        this.onCheckChange(item);
                      }}
                    />
                    {item}
                  </label>
                );
              })}
              <p>爱好是{this.state.selectedList.join()}</p>
            </div>
          );
        }
      }
      ReactDOM.render(<App />, document.getElementById("root"));

单选框与多选框类似，也是根据选中的值是否为该选项来动态设置checked属性，然后在change事件中更改选中的值即可

生命周期

react提供了诸多的生命周期方法，不过通常比较常用的有3个
componentDidMount()
componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。通常发送网络请求获取数据应该在此处
componentDidUpdate()
componentDidUpdate() 会在更新后会被立即调用。要注意首次渲染不会执行此方法。
当组件更新后，可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。（例如，当 props 未发生变化时，则不会执行网络请求）。
可以在此处调用setState，但一定要添加一定的条件，否则会陷入死循环
componentWillUnmount()
componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。
componentWillUnmount() 中不应调用 setState()，因为该组件将永远不会重新渲染。

附上官方的一个生命周期图谱

当然官方的生命周期不止这3个，不过剩下的比较不常用，作为了解即可

getDerivedStateFromProps()
getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

shouldComponentUpdate()
根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。大部分情况下，你应该遵循默认行为。也可以根据一些条件来使页面不更新，返回teue则更新，返回false则不更新

getSnapshotBeforeUpdate()
getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()

以上就是关于react的生命周期
附上官方生命周期图谱