React的生命周期 受控组件的state
begin enjoy👇

三 React

组件生命周期

函数式组件没有状态,没有生命周期。类组件才有生命周期

组件生命周期

生命周期方法

  • componentWillMount() 准备挂载
  • componentDidMount() 挂载完成
  • componentWillReceiveProps() 接收到父组件传递的props数据
  • shouldComponentUpdate(nextProps,nextState) 组件可能要更新
  • componentWillUpdate(nextProps, nextState) 准备更新
  • componentDidUpdate(prevProps,prevState) 更新完成
  • componentWillUnmount() 组件卸载

两个可以触发生命周期的方法

  • forceUpdate() 强制重新渲染界面
  • ReactDOM.unmountComponentAtNode(document.querySelector('#root')) 卸载组件

以上两个方法不推荐使用。

性能优化

shouldComponentUpdate(nextProps,nextState)
此方法仅作为性能优化的方式而存在。不要企图依靠此方法来“阻止”渲染,因为这可能会产生 bug。你应该考虑使用内置的 PureComponent 组件,而不是手动编写 shouldComponentUpdate()PureComponent 会对 propsstate 进行浅层比较,并减少了跳过必要更新的可能性。

如果你一定要手动编写此函数,可以将 this.props 与 nextProps 以及 this.state 与nextState 进行比较,并返回 false 以告知 React 可以跳过更新。请注意,返回 false 并不会阻止子组件在 state 更改时重新渲染。

我们不建议在 shouldComponentUpdate() 中进行深层比较或使用 JSON.stringify()。这样非常影响效率,且会损害性能。


受控组件

在 HTML 中,表单元素(如<input><textarea><select>)之类的表单元素通常自己维护 state,并根据用户输入进行更新。而在 React 中,可变状态(mutable state)通常保存在组件的 state 属性中,并且只能通过使用 setState()来更新。

一个受控组件中,表单数据是由 React 组件来管理。

  1. <input />输入框
class Home extends React.Component{
    constructor(props){
        super()
        this.state = {
            value1 : ''
        }
    }
    render(){
        return <div>
            <input type="text" value={this.state.value1} 
                onChange={ev=>this.setState({value1:ev.target.value})}/>
            <h2>{this.state.value1}</h2>
        </div>
    }
}
  1. 单选框
class Home extends React.Component{
    constructor(props){
        super()
        this.state = {
            isRemeber : false
        }
    }
    render(){
        return <div>
            <input type="checkbox" checked={this.state.isRemeber} 
                onChange={ev=>this.setState({isRemeber: !this.state.isRemeber})}/>
            <h2>{this.state.isRemeber?"true":"false"}</h2>
        </div>
    }
}
  1. 复选框
class Home extends React.Component{
    constructor(props){
        super()
        this.state = {
            colors:['red','blue'],
        }
        this.hanldInput = this.hanldInput.bind(this)
    }
    // 复选框改变事件
    hanldInput(ev){
        //添加
        if(ev.target.checked){
            this.setState({
                colors:[
                    ...this.state.colors,
                    ev.target.value
                ]
            })
        }else{ //删除
            //获取到要删除的下标
            let i = this.state.colors.indexOf(ev.target.value)
            this.setState({
                colors:[
                    ...this.state.colors.slice(0,i), 
                    ...this.state.colors.slice(i+1)
                ]
            })
        }
        
    }
    render(){
        return <div>
            <input type='checkbox' checked={this.state.colors.includes('red')}
                onChange={this.hanldInput} 
                value='red' />red
            <input type='checkbox' checked={this.state.colors.includes('blue')}
                onChange={this.hanldInput}
                value='blue' />blue
            <input type='checkbox' checked={this.state.colors.includes('green')}
                onChange={this.hanldInput}
                value='green' />green
            <div>颜色:{this.state.colors}</div>
        </div>
    }
}

posted @ Zycin (非转载 来自个人学习资料整理)