React学习笔记

浅唱忧伤
164 阅读3分钟

React组件状态共享

  1. render props
  2. 第三方状态管理
  3. react hooks不用class也能使用state

react组件的生命周期有

  • constructor
  • getDeriveStateFromProps 该方法无权获得组件实例 / (derive:获得，取得)
  • render
  • componentWillMount
  • componentDidMount
  • componentDidUpdate
  • shouldComponentUpdate
  • getSnapshotBeforeUpdate

React Hooks

Q: React Hooks 为什么会被引入, 其想要解决什么问题？

React Hook 在 16.8 版本被引入, 它可以让你在不使用 class 的情况下使用 state 和其他 React 特性

  1. 组件之间难以复用状态逻辑. 此前解决该问题的方法是 render props 个 高阶组件. 这类方式都需要重新的去组织组件结构, 如果你用 React DevTools 看一下应用, 你会发现有很多 provider, consumer, render props 和 高阶组件, 形成了嵌套地域. React Hooks 可以让你在不改变组件结构的情况下复用状态逻辑.
  2. 复杂组件变得难以理解. 你可能会在 componentDidMount 和 componentDidUpdate 中发起请求来获取数据. 你可能会在 componentDidMount 中绑定事件, 然后在 componentWillUnmount 取消事件监听. 看到了吗? 绑定事件和取消绑定事件这对本来需要同步去做的事情, 被拆分到了不同的函数中, 并且绑定事件和发起请求这两个不相关的行为被放到了同一个函数里面. React Hooks 将组件中相互关联的部分拆分成更小的函数, 而非按照生命周期进行拆分.
  3. class 难以理解, 你必须去理解 this 在 JavaScript 中的运作方式, 这与其他语言有着巨大差异. 没有稳定的语法提案, 这些代码非常冗余. React Hooks 使你在不使用 class 的情况下可以使用更多的 React 特性. Note: 其实第三点我感触不深, 我对于其他语言没有太多的了解. 至于说稳定的语法提案, 有了 babel, 对于平时的使用也不会有太大的影响.

React Hooks使用要求

不要在循环，条件或嵌套函数中调用Hook。相反，始终在React函数的顶层使用Hooks。通过遵循此规则，您可以确保每次组件呈现时都以相同的顺序调用Hook。这就是允许React在多个useState和useEffect调用之间正确保留Hook状态的原因。

useState：使函数组件拥有state

useReduce：useState的替代方案

useEffect

useContext：组件间共享数据

taro独有的生命周期

componentWillMount
在微信小程序中这一生命周期方法对应页面的onLoad或入口文件app中的onLaunch

componentDidMount
在微信小程序中这一生命周期方法对应页面的onReady或入口文件app中的onLaunch，在 componentWillMount后执行

componentDidShow
在微信小程序中这一生命周期方法对应 onShow

componentDidHide
在微信小程序中这一生命周期方法对应 onHide

componentDidCatchError
错误监听函数，在微信小程序中这一生命周期方法对应 onError

componentDidNotFound
页面不存在监听函数，在微信小程序中这一生命周期方法对应 onPageNotFound

shouldComponentUpdate
页面是否需要更新

componentWillUpdate
页面即将更新

componentDidUpdate
页面更新完毕

componentWillUnmount
页面退出，在微信小程序中这一生命周期方法对应 onUnload
avatar
文章
阅读
粉丝