react组件props和state属性以及更新优化

state指的的是组件中的状态，这个是不能直接供给别人使用的，需要props

props是指父传递给子组件的

父组件更新state，导致props也更新了，如果子组件使用的是state，此时子组件render钩子函数会触发，但是数据不会变，因为子组件的state不会自动更新

class Persion extends React.Component{
    constructor(props){
        super(props)
        this.state ={
            lists : ['a'],
            bool:1
        }
    }
    onhandle=()=>{
        this.setState({lists:[...this.state.lists,Math.floor(Math.random()*10)]})
    }
    onBool=()=>{
        this.setState({bool:Math.floor(Math.random()*10)})
    }
    render(){
        return(
            <div>
                <Clid  lists={this.state.lists}></Clid>
                <button onClick={this.onhandle}>addList</button>
                <button onClick={this.onBool}>bool</button>

            </div>
            
        )
    }
}
class Clid extends React.Component{
    constructor(props){
        super(props)
        this.state ={
            lists : this.props.lists
        }
    }
    render(){
        debugger;
        return (
            <div>
            <ul>
                {
                    this.state.lists.map((li,index)=>{
                    return <li key={index+li}>{li}</li>
                    })
                }
            </ul>
        </div>
        )
    }
}

点击addList按钮,父组件状态更新，子组件会重新渲染（但不会重新创建），此时子组件用数据是this.state.lists，由于是重新渲染，而不是重新构建，所有不走初始化，因此子组件的state没有变
解决方案：

将this.state.lists改为this.props.lists，子组件渲染的数据直接从props中获取，一般这种写法适合数据只依赖于父组件props的

使用 getDerivedStateFromProps钩子函树，接收最新的props和当前的state。根据判断，更新state

性能优化props更新时才出发子组件的渲染

• shouldComponentUpdate,当父组件的state更新或者子组件的props更新，该钩子函数会被调用，判断是否需要重新渲染。
• React.memo用于创建函数组件时使用，被其包裹的组件，只有props更新才会重新创建
• userComponent创建的组件只有当props更新时才会重新渲染