react第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能)

第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能)

#课程目标

1. 理解因为react的单向数据流
2. 理解表单组件会因为react数据流变的不好维护
3. 理解受控组件与非受控组件的实质区别
4. 理解受控组件在实际项目中的运用场景
5. 利用受控组件完成一个表单控件的封装

#知识点

1. react单向数据流

• 数据主要从父节点传递到子节点(通过props)如果顶层（父级）的某个props改变了，React会重渲染所有的子节点。
• props => 不可以使用this.props直接修改props，因为props是只读的，props是用于整个组件树中传递数据和配置。
• state => 每个组件都有属于自己的state，state和props的区别在于前者(state)只存在于组件内部，只能从当前组件调用this.setState修改state值(不可以直接修改this.state！)。

1. 表单元素

• 表单元素有其特殊之处，用户可以通过键盘输入与鼠标选择，改变界面的显示。界面的改变也意味着有一些数据被改动，比较明显的是input的value，textarea的innerHTML，radio/checkbox的checked。

1. 非受控组件

   3-1. 如果一个表单组件没有value props(单选按钮和复选按钮对应的是 checked props)时,就可以称为非受控组件;

   3-2.使用defaultValue和defaultChecked来表示组件的默认状态;

   3-3.通过 defaultValue和defaultChecked来设置组件的默认值,它仅会被渲染一次,在后续的渲染时并不起作用

import React, { Component } from 'react';

class UnControlledInput extends Component {
    handleSubmit = (e) => {
        console.log(e);
        e.preventDefault();
        console.log(this.name.value);
    }
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <input type="text" ref={i => this.name = i} defaultValue="BeiJing" />
                <button type="submit">Submit</button>
            </form>
        );
    }
}

export default UnControlledInput;

 

1. 受控组件

• 从React的思路来讲，肯定是想让数据控制一切，或者简单的理解为，页面的生成与更新得忠实地执行JSX的指令，如果说：

<input value={this.state.value} />

1

• 当input.value是由组件的state.value拍出来的，当用户进行输入修改后，然后JSX再次重刷视图，这时input.value是采取用户的新值还是state的新值？基于这个分歧，React给出一个折衷的方案，两者都支持，于是就产生了今天的受控组件了。
• React认为value/checked不能单独存在，需要与onInput/onChange/disabed/readOnly等控制value/checked的属性或事件一起使用。 它们共同构成受控组件，受控是受JSX的控制。如果用户没有写这些额外的属性与事件，那么框架内部会给它添加一些事件，如onClick, onInput, onChange，阻止你进行输入或选择，让你无法修改它的值。

  /*
  受控组件
  1. React是一个单向数据流
  2. 但可以自定义双向数据流组件(受控组件)
  */
  /*
  功能: 自定义组件, 功能如下
    1. 界面如页面所示
    2. 初始数据显示为renyl
    3. 输入数据时, 下面的数据同步变化
  */
  class ControlInput extends React.Component{
      constructor(props){
          super(props);
          this.state = {
              msg:'renyl'
          }
          this.handleChange = this.handleChange.bind(this);
      }
      // 通过事件的形式控制存储状态
      handleChange(event){
          debugger;
          console.log(event.target.value);
          this.setState({
            msg:event.target.value
          });
      }
      render () {
          let {msg} = this.state;
          return (
                <div>
                  <input onChange={this.handleChange} type="text" value={msg}/>
                  <p>{msg}</p>
                </div>
          )
      }
  }
  ReactDOM.render(<ControlInput />,document.getElementById("example"));

 

1. 受控组件的总结

   5-1.可以通过初始state中设置表单的默认值;

   5-2.每当表单的值发生变化时,调用onChange事件处理器;

   5-3.事件处理器通过合成事件对象e拿到改变后的状态,并更新应用的state.

   5-4.setState触发视图的重新渲染,完成表单组件值得更新

#授课思路

#案例和作业

1. 高度还原页面
2. 利用受控组件实现整体业务