React实战与原理笔记

jiezi

5 年前

jsx 语法糖;cli;state 管理;jest 单元测试;
webpack-bundle-analyzer
Storybook
查看更多 …

用于初始化内部状态，很少使用；
唯一可以修改 state 的地方；
使用 this.state 来初始化 state
给事件处理函数绑定 this

当创建时、接收新的 props 时、setState 时、forceUpdate 时会执行这个方法
当 state 需要从 props 初始化时使用；
尽量不要使用：维护两者状态一致性会增加复杂度；
每次 render 都会调用
典型场景; 表单控件获取默认值

UI 渲染完成后调用
只执行一次
典型场景：获取外部资源

组件将要移除时调用
资源释放（一些事件监听和定时器需要在此时清除）

在页面 render 之前调用，state 已更新
典型场景：获取 render 之前的 DOM 状态

组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改 state

每次 UI 更新时调用
典型场景：页面需要根据 props 变化重新获取数据

决定 vdom 是否要重绘
一般可以由 PureComponent 自动实现
典型场景：性能优化

创建虚拟 dom，进行 diff 算法，更新 dom 树都在此进行。此时就不能更改 state 了。

组件渲染之后调用，只调用一次。

就是状态机器 UI=fn(state) (状态分类：domain ui app)

主要应用场景在于很多不同层级的组件需要访问同样一些的数据。如下图，组件 a、组件 g、组件 f 需要共享数据，则只需要在最外层套上 Provider，需要共享的组件使用 Consumer 即可。React 新 Context API 在前端状态管理的实践

使用者只需要传递子组件，子组件所需要的 props 在父组件会封装好，引用子组件的时候就没必要传递所有 props 了。

高阶组件本质是一个接受 Component 并返回新的 Component 的函数。目的是为了复用通用逻辑 [深入理解 React 高阶组件
](https://mp.weixin.qq.com/s?__…

是纯 UI 组件，也称无状态组件(SFC:Stateless Functional Component)。渲染所需要的数据只通过 props 传入, 不需要用 class 的方式来创建 React 组件, 也不需要用到 this 关键字，或者用到 state [React 中函数式声明组件
](https://segmentfault.com/a/11…

给某个组件通过 props 传递一个函数，并且函数会返回一个 React 组件

提供者模式可以解决非父子组件下的信息传递问题, 或者组件层级太深需要层层传递的问题

可以让父组件控制子组件 state。render props 可以控制子组件的 UI 是如何渲染的，state reducer 则可以控制子组件的 state.

将原来子组件改变 state 的逻辑移到父组件中，由父组件控制。
异步

组件通信: broadcast dispatch state props context

其他状态管理：dva, mobx,flexible,reflux,flummox

action: 当需要改变应用的状态或有 View 需要更新时，你需要触发一个 Action
action creator: 把 type 和 payload（载荷）封装成一个 Action。type 是你预定义的多个 type（通常是一个常量列表）之一，代表系统特定的 action。一旦 action 消息创建好了，Action Creator 就会把它传递给 Dispatcher
Dispatcher: 它保存着所有需要发送 action 的 store 列表。当 Action Creator 给过来一个 action，它会把这个 action 传递给各个 store。
waitfor:Dispatcher 的行为是同步的。如果想要在 store 之间实现依赖，有的更新完了其他的才能更新，你可以使用 Dispatcher 提供的 waitFor() 来实现。
store: 所有的状态变化, 必须通过 Action Creator/Dispatcher 通道。使用 switch 判断 action 的类型，决定是否相应。如果相应则根据 action 找出需要变化的部分，更新 state。

observable: 通过 observable(state) 定义组件的状态，包装后的状态是一个可观察数据（Observable Data）。
observer: 通过 observer(ReactComponent) 定义组件
action: 通过 action 来修改状态。

react-redux 提供了两个重要的对象，Provider 和 connect，前者使 React 组件可被连接（connectable），后者把 React 组件和 Redux 的 store 真正连接起来。
通过 reducer 创建一个 store，每当我们在 store 上 dispatch 一个 action，store 内的数据就会相应地发生变化。
provider
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

树的递归
判断属性的更改
判断列表差异算法实现 React Diff 算法
遍历子元素打标识
渲染差异

详情参考深入框架本源系列 —— Virtual Dom

以 hash 形式（也可以使用 History API 来处理）为例，当 url 的 hash 发生变化时，触发 hashchange 注册的回调，回调中去进行不同的操作，进行不同的内容的展示。前端路由实现与 react-router 源码分析

Web 应用是一个状态机，视图与状态是一一对应的。
所有的状态，保存在一个对象里面。

Redux 让应用的状态变化变得可预测。如果想改变应用的状态，就必须 dispatch 对应的 action。而不能直接改变应用的状态，因为保存这些状态的地方（称为 store）只有 get 方法（getState）而没有 set 方法。

只要 Redux 订阅 (subscribe) 相应框架 (例如 React) 内部方法，就可以使用该应用框架保证数据流动的一致性。

Redux 源码剖析及应用

《React 源码解析(一): 组件的实现与挂载》
《React 源码解析(二): 组件的类型与生命周期》
《React 源码解析(三): 详解事务与队列》
《React 源码解析(四): 事件系统》
React 底层揭秘

《深入浅出 React 和 Redux》程墨
React 状态管理库: Mobx
深入浅出 react
React 实践心得：react-redux 之 connect 方法详解、
《React 实战进阶 45 讲》王沛 – 极客时间
react 生命周期
重新认识 reacrt 生命周期
react 组件设计模式快速指南

React实战与原理笔记

React 实战与原理笔记

概念与工具集

生命周期

constructor()

getDerivedStateFromProps()

componentWillMount()

componentWillUnmount()

getSnapshotBeforeUpdate()

componentWillUpdata(nextProps, nextState)

componentDidUpdate()

shouldComponentUpdate(nextProps, nextState)

render()

componentDidMount()

组件设计模式

组件

context 模式

组合组件(Compound Component)

高阶组件(HOC)

函数组件

render props

提供者模式(Provider Pattern)

State Reducer

Controlled Components

实战 - 状态管理与组件通信

flux

mobx

redux

原理

Virtual Dom 算法实现

Router 实现

Redux 设计思想

其他

参考资料