React 速查速记

目录

• React思维
• state和props区别
• 同级组件通信

React思维

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

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()
);