学习掘金React进阶实践指南笔记（二）起源component

1。函数组件与类组件

前面都是一些基础的知识就不重复了，

注意

1.值得注意的是，类组件中实例对象上的方法属性优先级 > 原型链对象上的方法属性
2.不要尝试给函数组件prototype绑定属性或方法，即使绑定了也没有用，因为react源码中对函数组件的调用，是采用直接执行函数的方式，而不是通过new的方式。

函数组件与类组件本质的区别：

对于类组件来说，底层只需要实例化一次，实例中保存了组件的 state 等状态。对于每一次更新只需要调用 render 方法以及对应的生命周期就可以了。但是在函数组件中，每一次更新都是一次新的函数执行，一次函数组件的更新，里面的变量会重新声明。

2.组件通信方式

React 一共有 5 种主流的通信方式：

1.props 和 callback 方式
2.ref 方式。
3.React-redux 或 React-mobx 状态管理方式。
4.context上下文方式。
5.event bus 事件总线。（作者觉得适合在做基础构建的小程序）

event bus示例

import { BusService } from './eventBus'
/* event Bus  */
function Son(){
    const [ fatherSay , setFatherSay ] = useState('')
    React.useEffect(()=>{ 
        BusService.on('fatherSay',(value)=>{  /* 事件绑定 , 给父组件绑定事件 */
            setFatherSay(value)
       })
       return function(){  BusService.off('fatherSay') /* 解绑事件 */ }
    },[])
    return <div className='son' >
         我是子组件
        <div> 父组件对我说：{ fatherSay } </div>
        <input placeholder="我对父组件说" onChange={ (e)=> BusService.emit('childSay',e.target.value)  }   />
    </div>
}
/* 父组件 */
function Father(){
    const [ childSay , setChildSay ] = useState('')
    React.useEffect(()=>{    /* 事件绑定 , 给子组件绑定事件 */
        BusService.on('childSay',(value)=>{
             setChildSay(value)
        })
        return function(){  BusService.off('childSay') /* 解绑事件 */ }
    },[])
    return <div className="box father" >
        我是父组件
       <div> 子组件对我说：{ childSay } </div>
       <input placeholder="我对子组件说" onChange={ (e)=> BusService.emit('fatherSay',e.target.value) }   />
       <Son  />
    </div>
}

这样做不仅达到了和使用 props 同样的效果，还能跨层级，不会受到 React 父子组件层级的影响。但是为什么很多人都不推荐这种方式呢？因为它有一些致命缺点。

1.需要手动绑定和解绑。
2.对于小型项目还好，但是对于中大型项目，这种方式的组件通信，会造成牵一发动全身的影响，而且后期难以维护，组件之间的状态也是未知的。
3.一定程度上违背了 React 数据流向原则。

3.组件强化方式

1.类组件继承（ES6继承，通过extends关键字，注意的是使用子类的时候，父类的componentDidMount不会被执行）
2.函数组件自定义hooks
3.hoc