一、组件通讯概念

​ 在React中，组件是独立且封闭的单元，在默认情况下，组件state中的数据是私有数据，组件只能使用自身的数据。但是在实际项目开发过程中，我们的页面是由多个组件共同组成的，而这些组件之间不可避免的要共享某些数据，这个在组件之间传递数据的过程，就称为组件通讯。

二、props 基础

​ 在React中封闭的组件想要接收外部数据应该通过 props 来实现。props是一个只读的对象，对象内的属性值就是外部传递过来的数据，属性只能被读取，无法被修改，属于单向数据流。

​ 组件传递数据的方式就是在使用组件标签时给标签添加属性，属性名和属性值就会传递到props中，props中值的数据类型取决于传递的方式。如果是字符串类型的值，以键值对的形式即可，如果是数值型或其他数据类型就需要用 { } 包裹：

<Hello name="Tom" age={19} />

​ 组件接收数据的方式类组件和函数组件有所不同，在函数组件中，需要把props作为函数的参数，然后通过props.属性名 的形式来访问对应的接收的数据。

// 函数组件
function Hello(props) {console.log(props)return (<div>接收到的name数据：{ props.name }</div>)
}

​ 而在类组件中，直接以 this.props.属性名 的形式来访问对应的接收的数据。但还有一点要注意：如果在类组件中写了构造函数 constructor ，并且想在构造函数中使用 props ，那就应该将 props 传递给 super() ，否则无法在构造函数中获取使用 props。

// 类组件
class Hello extends React.Component {constructor(props) {// 将props传递给父类构造函数super(props)}render() {return (<div>接收到的age数据：{ this.props.age }</div>)}
}

三、组件通讯的四种方式

1、父向子传递数据

​ 将父组件state中的数据传递给子组件的过程比较简单，只需要父组件在使用子组件标签时添加属性，将数据向子组件传递。然后在子组件中通过 props 来接收相应的数据。

// 父组件传递数据
class Parent extends React.Component {state = { name: '朱猪侠' }render() {renturn (<!-- 通过属性的方式传递数据 --><div>传递数据给子组件：<Child name={this.state.name} age={22} /></div>)}
}
// 子组件接收数据
function Child(props) {console.log('子组件的props：', props)return (<!-- 通过props获取传递过来的数据 --><div>子组件，接收到父组件的数据：姓名：{props.name} 年龄：{props.age}</div>)
}

子组件的props：

2、子向父传递数据

​ 子组件想要传递数据给父组件，需要利用到回调函数，也就是在父组件中定义一个接收参数的回调函数，然后把这个函数利用属性传递给子组件，子组件通过props调用传递过来的回调函数，并把想要传递的数据作为回调函数的参数，此时父组件中的回调函数就获得了子组件传递过来的数据。

// 父组件
class Parent extends React.Component {state = {parentMsg: ''}// 提供回调函数，用来接收子组件传递过来的数据getChildMsg = data => {console.log('接收到子组件中传递过来的数据：', data)this.setState({parentMsg: data})}render() {return (<div className="parent">父组件：{this.state.parentMsg}{/*将回调函数传递给子组件*/}<Child getMsg={this.getChildMsg} /></div>)}
}
// 子组件
class Child extends React.Component {state = {msg: '我是子组件中的数据'}handleClick = () => {// 子组件调用父组件中传递过来的回调函数// 并把想要传递的数据作为参数this.props.getMsg(this.state.msg)}render() {return (<div className="child">子组件：{/*触发事件 调用回调函数*/}<button onClick={this.handleClick}>点我，给父组件传递数据</button></div>)}
}

3、同级兄弟组件传递数据

​ 同级的兄弟组件之间如果想要传递数据，则需要先将想要传递的数据提升最近的公共父组件中，让公共父组件管理这个数据，并提供操作该数据的函数。首先要将该数据的操作函数传递到一个子组件A中，然后再将该数据传递到子组件B中。这样当子组件A通过props调用操作函数时，父组件中的数据就会被修改，子组件B中接收的数据也会跟着改变。

​ 简单来说就是：将兄弟组件中想要传递的私有数据提升到公共父组件中，变为共享数据。这样兄弟组件就都可以获得该数据。

// 父组件
class Counter extends React.Component {// 提供共享状态state = {count: 0}// 提供修改状态的方法onIncrement = () => {this.setState({count: this.state.count + 1})}render() {return (<div>{/*将数据传递到子组件1中*/}<Child1 count={this.state.count} />{/*将数据的操作方法传递到子组件2中*/}<Child2 onIncrement={this.onIncrement} /></div>)}
}
// 子组件1 展示数据
const Child1 = props => {return <h1>计数器：{props.count}</h1>
}
// 子组件2 修改数据
const Child2 = props => {return <button onClick={() => props.onIncrement()}>+1</button>
}

4、Context

​ 上面三种方式已经能够实现大部分场景的数据传递，但如果两个组件之间距离很远，组件嵌套很多，那此时还使用上面的数据传递方法，代码就会变的十分繁琐。所以React还提供了 Context 这一传递数据的方式，来应对跨多个组件传递数据的场景。

​ Context 提供了两个组件：Provider 和 Consumer 。Provider 组件用来包裹向外传递数据副组件的JSX结构，作为父节点，并通过 value 存储要传递的数据。Consumer 组件用来包裹想要接收使用数据的JSX结构，作为子节点，并通过回调函数的参数来使用存储的数据。

// 1.创建context  并得到Provider 和 Consumer两个组件
const { Provider, Consumer } = React.createContext()class App extends React.Component {render() {return (//  包裹JSX结构，并通过 value 属性存储想要传递的数据<Provider value="pink"><div className="app"><Node /></div></Provider>)}
}const Node = props => {return (<div className="node"><SubNode /></div>)
}const SubNode = props => {return (<div className="subnode"><Child /></div>)
}const Child = props => {return (<div className="child">{/* 通过函数的参数，使用Provider存储的数据 */}<Consumer>{data => <span>我是子节点 -- {data}</span>}</Consumer></div>)
}ReactDOM.render(<App />, document.getElementById('root'))

四、props 深入

1、children 属性

​ 在组件中我们可以通过 props 的 children 属性来获取当前组件标签内的子节点，子节点可以是文本、React元素、组件以及函数等。

// children 为 文本节点、组件JSX
const App = props => {console.log(props)return (<div><h1>组件标签的子节点：</h1>{props.children}</div>)
}
const Test = () => <button>我是button组件</button>
ReactDOM.render(<App>{/* <p>我是子节点，是一个p标签</p> */}{/* <Test /> */}我是子节点</App>, document.getElementById('root')) // children 为 函数
const App = props => {console.log(props)props.children()return (<div><h1>组件标签的子节点：</h1>{/* {props.children} */}</div>)
}ReactDOM.render(<App>{() => console.log('这是一个函数子节点')}</App>,document.getElementById('root')
)

2、校验 props 的数据类型

​ 对于组件本身来说，props 是由使用者传递过来的，数据类型和格式由使用者决定。但在实际开发中，我们通常只希望使用者传递我们所规定的数据类型。所以react提供了一个名为 prop-types 的依赖包，可以让我们指定传递给组件的数据格式，而且如果传递的数据不符合指定的数据格式，还会在控制台给出明确的错误提示。

在项目中使用 prop-types 的步骤：

​ ① 安装依赖包 npm install props-types 或 yarn add prop-types

​ ② 导入下载的依赖包

​ ③ 通过 组件名.proptypes = { prop名称: PropTypes.数据类型 } 来给组件的props指定数据类型

// 导入包
import PropTypes from 'prop-types'const App = props => {const arr = props.colorsconst lis = arr.map((item, index) => <li key={index}>{item}</li>)return <ul>{lis}</ul>
}// 添加props校验
App.propTypes = {colors: PropTypes.array
}ReactDOM.render(<App colors={['red', 'blue']} />,document.getElementById('root')
)

常见的prop约束规则：

​ ① 常见数据类型：array、bool(即boolean)、func(即function)、number、object、string 等

​ ② React元素类型：element

​ ③ 必填验证：isRequired，即要求props中必须有该数据。

​ ④ 特定结构的对象：shape({ }) ，即对 对象中的 某些属性的数据类型，做出约束。

注意： 当想要同时使用多条验证规则时，只需要采用链式编程的方式即可，如 PropTypes.func.isRequired ，要求既是函数又是必填项。

import PropTypes from 'prop-types'const App = props => {return (<div><h1>props校验：</h1></div>)
}
// 添加props校验
// 属性 a 的类型：      数值（number）
// 属性 fn 的类型：     函数（func）并且为必填项
// 属性 tag 的类型：    React元素（element）
// 属性 filter 的类型： 对象（{area: '上海', price: 1999}）
App.propTypes = {a: PropTypes.number,fn: PropTypes.func.isRequired,tag: PropTypes.element,filter: PropTypes.shape({area: PropTypes.string,price: PropTypes.number})
}ReactDOM.render(<App fn={() => {}} />, document.getElementById('root'))

3、prop 默认值

​ 我们可以给组件的某些prop，设置默认值，当组件在使用时，没有传入该prop数据，那我么那就使用默认值来设置组件。设置默认值需要借助于组件的 defaultProps 属性：

const App = props => {return (<div><h1>props校验：{ props.a }</h1></div>)
}App.defaultProps = {a: 123  // 给props中的 a 设置默认值
}
ReactDOM.render(<App />, document.getElementById('root'))