react受控组件和非受控组件

react受控组件和非受控组件

受控组件:

先看例子:

import React, { Component } from 'react'

export default class ShouKong extends Component {
  constructor() {
    super()
    this.state = {
      value: '1'
    }
  }
  render() {
    const { value } = this.state
    return (
      <div>
        {value}
        //注意这里的onChange 一定要通过onChange来触发数据改动的事件
        //一定要写
        <input type="text" value={value} onChange={this.handleChangeValue} />
      </div>
    )
  }

  handleChangeValue = (e) => {
      //通过这个  e  元素就可以拿到当前表单元素
    this.setState({
      value: e.target.value
    })
  }
}

受控组件就是指这个input 组件,我们要经常使用表单来搜集用户输入，还有比如说input , select,textearea等这些元素都要绑定一个change事件，当表单的状态发生变化，就会触发onChange事件，更新组件的state。这种组件在React中被称为受控组件，受控组件，在我看来就像是vue当中的双向绑定,因为在react当中的数据绑定是单向的,但是像这样子的一个处理,就可以使数据发生改变的时候,视图也跟着改变.

当触发改变的事件之后,react中的改变state里面的数据的方式和微信小程序的方式是一样的 ,都是 this.setState({’’})的方式来改变的.

非受控组件:

在非受控组件中，我们可以使用一个ref来从DOM获得表单值。而不是为每个状态更新编写一个事件处理程序。

export default class FeiShouKong extends Component {
  constructor() {
    super()
    // 16.3 之后建议使用的 
    this.inputRef = createRef()
  }
  render() {
    // console.log()
    return (
      <div>
        <input type="text" ref={this.inputRef} onChange={this.handleChangeValue} />
      </div>
    )
  }

  handleChangeValue = () => {
    // 老版本方式  
    // console.log(this.refs.inputRef.value)
    console.log(this.inputRef.current.value)
  }
}

由于非受控组件将真实数据保存在 DOM 中，因此在使用非受控组件时，更容易同时集成 React 和非 React 代码。如果你想快速而随性，这样做可以减小代码量。否则，你应该使用受控组件。