React 组件通讯方式

目录

props

context

Redux

总结

---

props

适合父子组件，父组件给子组件传递数据和函数，传函数时，子组件可回传数据给父组件

示例

// parent 里
<Child list={this.state.list} add={this.addHandler}></Child> // React 里传数据和函数都是直接传就可以，内容用{}，加 this

// child 里
Child.propTypes = { // 类型检查
    list: PropTypes.arrayof(PropTypes.object).isRequired
}
const { list, add } = this.props // React 里子组件直接用 props 获取父组件传来的数据和函数
add(this.title)

context

上下级（跨多级）组件，即顶层组件往所有子孙组件传递数据，适合一些简单的公共信息，如主题色、语言等，这些信息用 props 传递过于复杂，用 redux 传递过度设计，所以用 context 比较合适

示例

// App
const ThemeContext = React.createContext('light') // 定义一个 context 对象
<ThemeContext.Provider value={this.state.theme}> // 用 ThemeContext.Provider 包裹子组件
    <Toolbar />
</ThemeContext>

// Toolbar，中间组件不必透传
<ThemeButton />
<ThemeLink />

// ThemeButton
static contextType = ThemeContext // 孙子组件设置 context 类型 方法 1，ES6 新语法
render() {
    const theme = this.context // 从 this.context 获取即可
}
ThemeButton.contextType = ThemeContext // 孙子组件设置 context 类型 方法 2

// ThemeLink
function ThemeLink() {
    return <ThemeContext.consumer> // 函数组件用 ThemeContext.consumer 接收
        {value => <p>主题是 {value}</p>}
    </ThemeContext.consumer>
}

Redux

全局状态管理，适合全局不相关组件共享数据，如复杂的公共业务数据管理

总结

父子组件用 props 传递数据和函数，传函数时，子组件可回传数据给父组件 ->

上下层级组件，用 context，适合简单的共享数据，如语言、主题等 ->

全局不相关组件用 redux 共享数据，如复杂的公共业务数据等