React组件传参

父传子:

• 父组件通过自定义属性提供数据

• 子组件接收{类组件this.props 函数组件:第一个形参,一般写成props}

• 传递对象里面的所有属性 <child {...obj} />

注意事项:

1.单向数据流:

• 父组件修改的数据会影响使用到此数据的子组件

• 子组件不要直接修改父组件的数据

2.可以传递任意的类型:

• 传递数字 <child age={18} />

• 传递字符串等价的两种写法:

<child name='abc' /> <child name={'abc'} />

3.关于constructor:

使用类组件时,如果写了构造函数,应该在constructor中接收props,并将props传递给super,否则无法在构造函数中使用this.props

子传父:

• 父组件提供修改数据的方法

• 子组件调用这个方法同时传递实参

• 父组件的方法里面接收参数,然后做相应的操作

兄弟通信:

• 把B组件的数据提到公共组件里面面

• 父组件提供数据和操作数据的方法

• 父组件的数据提供给B组件,操作数据的方法提供给A组件

• A组件调用方法的同时并传递参数给父组件,父组件拿到数据做相应操作,数据变了,B组件就变了

跨层级通信:

• 祖先组件通过 React.crateContext() 创建 Context 并导出。

• 祖先组件通过 <Context.Provider> 配合 value 属性提供数据。

• 后代组件通过 <Context.Consumer> 配合函数获取数据。

• 优化：提取 React.crateContext() 到单独的文件里面。