React

🌸 您好，欢迎您的阅读，等君久矣，愿与君畅谈.
🔭 § 始于颜值 § 陷于才华 § 忠于人品 §
📫 希望我们可以进一步交流，共同学习，共同探索未知的技术世界 稀土掘金 OR GitHub.

---

# 组件通信

1. 父子组件通信

   1. 父组件传递子组件数据通信

      1. 父组件通过 属性=值 的形式来传递给子组件数据

      2. 子组件通过 props 参数获取父组件传递过来的数据

      3. 类组件之间传参

         class Children extends Component{
           // 构造方法，方式一
           // constructor(props){
           //   super();
           //   this.props = props;
           // }     
           
           // 构造方法，方式二
           // constructor(props){
           //   super(props);
           // }
           // 构造方法，方式三
           // 不写，子类的默认构造方法可以省略
           render(){
             const { name,age,height } = this.props;
             return (
               <div>
                 <h2>子组件显示数据:{name+" "+age+" "+height}</h2>
               </div>
             )
           }
         }
         export default class App extends Component {
           render() {
             return (
               <div>
                 <Children name="why" age="20" height="188"></Children> 
                 <Children name="GXX" age="22" height="172"></Children> 
               </div>
             )
           }
         }

      4. 函数组件之间传参

         function Children(props) {
           const { name,age,height } = props;
           return (
             <div>
               <h2>App_函数组件</h2>
               <h2>{name+" "+age+" "+height}</h2>
             </div>
           )
         }
         export default class App extends Component {
           render() {
             return (
               <div>
                 <Children name="why" age="20" height="188"></Children> 
                 <Children name="GXX" age="22" height="172"></Children> 
               </div>
             )
           }
         }

      5. 组件参数类型验证

         import PropTypes from 'prop-types'
         function Children(props) {
           const { name,age,height,names} = props;
           return (
             <div>
               <h2>App_函数组件</h2>
               <h2>{name+" "+age+" "+height}</h2>
               <ul>
                 {
                   names.map((item,index)=>{
                     return <li>{item}</li>
                   })
                 }
               </ul>
             </div>
           )
         }
         // 设置属性类型验证
         Children.propsTypes = {
           name:PropTypes.string.isRequired,
           age:PropTypes.number,
           height:PropTypes.number,
           names:PropTypes.array
         }
         // 设置属性默认值
         Children.defaultProps = {
           name:"XGG",
           age:12,//默认类型也会进行类型判断
           height:199,
           names:["123","456","789"]
         }
         // 补充：类组件的相关属性编写规范
         class Children2 extends Component{
           //es6中class fields写法，给类上添加属性，而非对象上
           static propsTypes ={
           }
           static defaultProps ={
           }
         }
         Children2.propsTypes = {
         }

   2. 子组件传递父组件通信

      1. 父组件给子组件传递一个回调函数，在子组件中调用这个函数即可
      2. 子组件可以通过该回调函数向父组件传递参数

   3. 模拟插槽样式

2. 跨组件通信 (数据传递)

   1. 按照层次依次传递： Spread Attributes ，可以使用属性展开符： ... ，但是此方案对于中间层会存在冗余操作
   2. 使用 ReactAPI: Context
      1. React.createContext : 创建一个需要共享的对象，若某组件订阅 Context 时该组件会从距离自身最近的匹配 Provider 中读取到当前 Context 值， defaultValue 是组件在顶层查找过程中没有找到对应的 Provider , 就会使用默认值。
      2. context.Provider : 在创建 Context对象 (context) 时会返回一个 Provider React组件 ，它允许消费组件订阅 Context 变化， Provider 接收一个属性 value 属性传递给消费组件，一个 Provider 可以和多个消费组件有对应关系，多个 Provider 可以嵌套使用，里层会覆盖外层数据；当 Provider 的 value 值发生变化时，它内部所有的消费组件都会重新渲染
      3. contextType : 挂载在 class 上的 contextType 属性会被重新赋值为一个由 React.createContext 创建的 Context 对象，这可以使用 this.context 来获取最近 Context 上的值；可以在任何生命周期中访问到，包括 render 函数
      4. Consumer : React 组件可以订阅到 context 变化，可以在函数式组件中完成订阅 context，需要函数作为子元素，该函数接收当前的 context 值，返回一个 React 节点

3. events （全局事件传递）

   1. npm install events : 安装
   2. 常用 API
      1. eventBus对象 ：创建 EventEmitter 对象
      2. eventBus.emit("事件名称",参数列表) : 发出事件
      3. eventBus.addListener("事件名称",监听函数) : 监听事件
      4. eventBus.removeListener("事件名称",监听函数) : 移除事件