Jul 12, 2024

React 速查速记

目录

React思维

  1. 将预期的UI界面拆分成组件树
  2. 先做出死版本(静态)
  3. 思考state
    • 何时使用state?
    • 是局域的还是全局的?
    • state应该放在哪个组件?
  4. 思考数据流
    • 单向数据流
    • 子组件向父组件传递数据
    • 使用全局状态

state和props区别

state的特点:

  1. state是组件内部的数据
  2. state是组件的记忆
  3. 能由组件自身改变
  4. 更新时会重新渲染组件
  5. 用于产生交互性

props的特点:

  1. props是父组件拥有的外部数据
  2. props是组件的参数
  3. props是只读的
  4. props变化时会重新渲染组件(通常是因为父组件的state变化)

同级组件通信

通过将state提升到共同的父组件(类似最近公共祖先)实现 假定A组件控制state并希望在同级的B组件中使用state:

  1. 将A组件的对state的定义搬到共同的父组件中
  2. A组件中所有涉及对setState的函数也一并搬到共同的父组件中
  3. 这些修改函数换个名字再通过props传递给A组件, 之前对修改函数的调用也都改名字
  4. 子组件就可以通过props调用state了

相当于通过setter的向下传递实现数据的反向传递

小技巧

无刷新跳转

// 直接替换当前的地址会造成刷新, 所以使用pushState
window.history.pushState(
   {},
   "",
   url.toString()
);