React学习笔记——props

props到底是什么？

class Deme extends React.Component{ 
    state={ mes: "hello,React" } 
    node = null 
    say= () => this.setState({ mes:'let us learn React!' }) 
    render(){ 
        return <div> 
            <PropsComponent 
                mes={this.state.mes} // ① props 作为一个渲染数据源 
                say={ this.say } // ② props 作为一个回调函数 callback 
                Component={ ChidrenComponent } // ③ props 作为一个组件 
                renderName={ ()=><div> my name is alien </div> } // ④ props 作为渲染函数 
            > 
                { ()=> <div>hello,world</div> } { /* ⑤render props */ }
                <ChidrenComponent /> { /* ⑥render component */ } 
            </PropsComponent> 
        </div> 
    } 
}

组件层级方面

• 父组件 props 可以把数据层传递给子组件去渲染消费;
• 子组件可以通过 props 中的 callback ，来向父组件传递信息;
• 可以将视图容器作为 props 进行渲染。

更新机制方面

props 可以作为组件是否更新的重要准则，变化即更新，于是有了 PureComponent ，memo 等性能优化方案。

React 插槽方面

React 可以把组件的闭合标签里的插槽，转化成 chidren 属性。

props监听

类组件

1. componentWillReceiveProps(nextProps, nextState) 在初始props不会被调用，它会在组件接受到新的props时调用。不推荐使用，未来版本可能废弃。

componentWillReceiveProps(nextProps) {
     //通过this.props来获取旧的外部状态,初始 props 不会被调用
     //通过对比新旧状态，来判断是否执行如this.setState及其他方法
}

2. static getDerivedStateFromProps(props, state) 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。

static getDerivedStateFromProps(nextProps, prevState) { 
    const {type} = nextProps; // 当传入的type发生变化的时候，更新state 
    if (type !== prevState.type) { 
        return { 
            type, 
        }; 
    } 
    // 否则，对于state不进行任何操作 
    return null; 
}

函数组件

useEffect

React.useEffect(()=>{ 
    // props 中number 改变，执行这个副作用。 
    console.log('props改变：' ，props.number ) 
},[ props.number ])

props语法糖

1.混入props

function Son(props){
    console.log(props)
    return <div> hello,world </div>
}
function Father(props){
    const fatherProps={
        mes:'let us learn React !'
    }
    return <Son {...props} { ...fatherProps }  />
}
function Index(){
    const indexProps = {
        name:'alien',
        age:'28',
    }
    return <Father { ...indexProps }  />
}

Father 组件一方面直接将 Index 组件 indexProps 抽象传递给 Son，一方面混入 fatherProps 。

2.抽离props

function Son(props){
    console.log(props)
    return <div> hello,world </div>
}

function Father(props){
    const { age,...fatherProps  } = props
    return <Son  { ...fatherProps }  />
}
function Index(){
    const indexProps = {
        name:'alien',
        age:'28',
        mes:'let us learn React !'
    }
    return <Father { ...indexProps }  />
}

成功的将 indexProps 中的 age 属性抽离出来。

3.显示注入props

function Index(){ 
    return <Son name="alien" age="28" /> 
}

4.隐式注入props

这种方式，一般通过 React.cloneElement 对 props.chidren 克隆再混入新的 props 。

function Son(props){
     console.log(props) // {name: "alien", age: "28", mes: "let us learn React !"}
     return <div> hello,world </div>
}
function Father(prop){
    return React.cloneElement(prop.children,{  mes:'let us learn React !' })
}
function Index(){
    return <Father>
        <Son  name="alien"  age="28"  />
    </Father>
}

如上所示，将 mes 属性，隐式混入到了 Son 的 props 中。