React学习

React学习笔记（三）

该学习笔记源于B站视频https://www.bilibili.com/video/av69359910/?p=2&t=397
1、生命周期没有函数组件
常见生命周期方法：
（一）挂载
当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：
constructor()：初始化state，创建ref，bind.this
static getDerivedStateFromProps()：从props获取衍生的状态
render()：合成虚拟DOM
componentDidMount()：把组件挂载在页面上，AJAX在这一步中
注意: UNSAFE_componentWillMount()（在render之前执行）方法即将过时，在新代码中应该避免使用它。在16版以前，还有两个函数：getinitialstate()和getdefaultprops()。
什么时候触发更新？
1、props发生改变，组件会重新运行
2、state发生改变，组件更新
3、强制更新
（二）更新
static getDerivedStateFromProps()：和上面一样，里面没有this
shouldComponentUpdate()：是否能更新，true和false，深比较
render()：渲染
getSnapshotBeforeUpdate()：建立快照
componentDidUpdate()：组件更新完成
注意: 下述方法即将过时，在新代码中应该避免使用它们：UNSAFE_componentWillUpdate()、UNSAFE_componentWillReceiveProps()
和static getDerivedStateFromProps()具有排他性。
（三）卸载
当组件从 DOM 中移除时会调用如下方法：
componentWillUnmount()
（四）错误处理
当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：
static getDerivedStateFromError()：子组件抛出问题
componentDidCatch()：父组件收到错误渲染出来

2、shouldComponentUpdate()比较props和state来决定要不要更新，可以解决不断渲染的情况。或者直接把component改为PureComponent，但只能做浅比较。

3、AJAX使用axios，创建services文件夹，在文件夹下创建apis.js文件（接口的配置文件）

也可以配置isloading，具体看视频。

4、Hook 是 React 16.8 的新增特性,hook让函数组件使用类似生命周期的东西，引入useState，让函数组件也有自己的state，第一个参数是状态，第二个参数是更改状态的方法。注意点：useState初始值在括号里传入

const Counter=()=>{
const [count,setCount]=userState(0)
return(
  <div>
      <p>当前数量为{count}</p>
      <button onClick={()=>{setCount(count-1)}}>- </ button>
      <button onClick={()=>{setCount(count-1)}}>+</ button>
  </div>
)
}

useEffect类似于componentDidMount()和componentUpdate(),参数是一个回调，不管是挂载还是更新都会触发回调方法。

5、在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。