如何从Vue快速过渡到React？
React和Vue都是优秀的前端开发框架，Vue相对来讲官方文档更清晰，易学习上手，很多后端开发者在有前端需求的情况下会优先选择使用Vue来解决问题。
我之前一直使用Vue做前端需求，由于最近重构系统改用了React，所以开始学习，在学习的过程中总结了4个重点问题：
-
React如何实现一个组件？ React如何管理状态(变量)？
Reac如何使用生命周期的钩子函数？
-
React组件之间如何实现通讯？
1、React如何实现一个组件？
React中有两种组件，分别是：函数组件和类组件，在下面的代码示例中会分别演示两种组件的写法。其中，
-
函数组件必须有返回值，且返回值为html代码、封装组件等可渲染的内容； -
类组件必须实现render()方法，且render()方法需要返回一个可渲染的内容
2、React如何管理状态(变量)？
对于需要更新变化的变量，React没有Vue的数据双向绑定，不能通过直接赋值的方式改变状态，而是需要调用相应的set方法来更新。
在函数组件中，通过useState()方法来定义状态及其set方法，使用语法为：const [状态名，对应set方法名(可选)] = useState(非必填的初始化值)
在类组件中，状态的定义统一放在名为state的对象中，状态的更新统一调用setState()方法，传参为要更新的状态信息
3、React如何使用生命周期的钩子函数？
这里以常用的挂载和销毁两个钩子函数为例，类似对应于Vue中的mount()和destory()阶段。
在函数组件中，通过useEffect方法模拟钩子函数，它的第一个参数是一个函数，函数体(除return部分外)为挂载/更新时可进行的操作，函数体的返回值可返回一个销毁时的操作方法，它的第二个参数可以控制函数的调用，暂时不详述；
在类组件中，有专门的钩子函数componentDidMount()、componentDidUpdate()、componentWillUnmount()等；
4、React组件之间如何实现通讯？
这里先只记录下通过定义组件属性与事件的方式实现的通讯
（1）父组件向子组件传值
React与Vue类似，通过在父组件中给引用的子组件添加属性，在子组件中通过props获取传递的变量
（2）子组件向父组件传值(子组件调用父组件方法)
Vue中子组件向父组件传值一般通过emit触发自定义事件的方式传递，在React中，由于数据状态的变化需要调用set方法，因此是采用子组件调用父组件的方法来传递数据的
（3）父组件调用子组件方法
在函数组件中，父组件要想调研子组件的方法，
首先子组件需要使用forwardRef方法进行包装，
其次，需要在子组件中使用useImperativeHandle来暴露父组件可调用的方法，它的第一个参数是父组件传递来的ref实例，它的第二个参数是一个方法，方法返回值为可调用的子组件方法对象
在类组件中，推荐通过自定义事件来触发子组件将自身this传递给父组件，从而在父组件中调用子组件方法
附：
React官方文档 https://zh-hans.reactjs.org/
React生命周期图示 https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
关于state的hook文档链接 https://zh-hans.reactjs.org/docs/hooks-state.html
关于effect的hook文档链接 https://zh-hans.reactjs.org/docs/hooks-effect.html