由Vue转React的自学文档总结（一）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第22天，点击查看活动详情

前言

由vue3转学react，之前从未接触过react，自学了一遍感觉还好，容易上手。 期间的一些笔记，后续有更深的见解持续更新。

组件（类组件，函数组件）

• 组件名称首字母要大写，必须有返回值，没有写null
• 设置默认值：function 组件名（｛默认值：1｝）/ 类组件：static defaultProps ={ 默认值：1 }
• 实例化：类组件有实例化，函数组件没有

组件通信

父传子

1. 父组件通过state传递值。state里设置要传递的值
2. 给子组件标签添加属性，msg={this.state.msg1}
3. 子组件通过props接受父组件传来的数据(类组件用this.props /函数组件通过参数)获取 ->props对象

子传父

​ 子组件调用父组件传递过来的函数，并且把想要传递的数据当成函数实参传入即可

兄弟组件通信

​ 利用共同的父组件，实现子传父，父在传子的兄弟通信

跨组件（祖孙）通信Context

​ 在嵌套组件树里，采用Context不需要通过层层props传递，就能进行数据传递。

1. 创建Context对象，导出Provider和Consumer对象
2. 使用Provider包含根组件提供数据
3. 将需要用到组件，使用Consumer包裹，然后 value => 获取

//祖组件
const { Provider，Consumer } = createContext()
<Provider value={this.state.nextMsg}>
  <Brother/>
</Provider>

//孙组件
 <Consumer>
  {value => <span>{value}</span>}
</Consumer>

child属性：在组件内部使用都会自带这一属性，可以是文本，标签元素，函数，jsx

//例如父组件
<NextFather>
    <div>
 	   <p>标签</p>
	   {()=>{this.fun(id)}}
    </div>
</NextFather>

//NextFather子组件
function NextFather({children}){
    return(
       <div>
        {children}
       </div>
    )
}

生命周期

挂载阶段：

1. constructor(初始化state，创建Ref，使用bind解决this问题) ，初始化最先执行，只执行一次。

2. render (渲染UI)，每次组件渲染的时候都会触发。

3. componentDidMount(发送网络请求，Dom操作)，完成渲染后执行，初始化的时候执行一次。

更新阶段：

1. render(与挂载相同，是同一个render)，每次组件都会触发
2. componentDidUpdate（Dom操作，可以获取到更新后的Dom，不要直接调用setState），更新后渲染

卸载阶段

1. componentWillUnmount（执行清理工作，比如清理定时器），组件卸载

最后

持续更新中...