目录
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 共享数据,如复杂的公共业务数据等