摘要：异步实战状态管理与组件通信组件通信其他状态管理当需要改变应用的状态或有需要更新时，你需要触发一个把和载荷封装成一个。的行为是同步的。所有的状态变化必须通过通道。前端路由实现与源码分析设计思想应用是一个状态机，视图与状态是一一对应的。
React实战与原理笔记 概念与工具集
jsx语法糖;cli;state管理;jest单元测试;
webpack-bundle-analyzer
Storybook
查看更多...
生命周期 constructor()用于初始化内部状态，很少使用；
唯一可以修改state的地方；
使用 this.state 来初始化 state
给事件处理函数绑定 this
getDerivedStateFromProps()当创建时、接收新的 props 时、setState 时、forceUpdate 时会执行这个方法
当state需要从props初始化时使用；
尽量不要使用：维护两者状态一致性会增加复杂度；
每次render都会调用
典型场景;表单控件获取默认值
componentWillMount()UI渲染完成后调用
只执行一次
典型场景：获取外部资源
componentWillUnmount()组件将要移除时调用
资源释放（一些事件监听和定时器需要在此时清除）
getSnapshotBeforeUpdate()在页面render之前调用，state已更新
典型场景：获取render之前的DOM状态
componentWillUpdata(nextProps, nextState)组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state
componentDidUpdate()每次UI更新时调用
典型场景：页面需要根据props变化重新获取数据
shouldComponentUpdate(nextProps, nextState)决定vdom是否要重绘
一般可以由PureComponent自动实现
典型场景：性能优化
render()创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。
componentDidMount()组件渲染之后调用，只调用一次。
组件设计模式 组件就是状态机器UI=fn(state) (状态分类：domain ui app)
context模式主要应用场景在于很多不同层级的组件需要访问同样一些的数据。如下图，组件a、组件g、组件f需要共享数据，则只需要在最外层套上Provider，需要共享的组件使用Consumer即可。React新Context API在前端状态管理的实践
组合组件(Compound Component)使用者只需要传递子组件，子组件所需要的props在父组件会封装好，引用子组件的时候就没必要传递所有props了。
高阶组件(HOC)高阶组件本质是一个接受 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 组件
提供者模式(Provider Pattern)提供者模式可以解决非父子组件下的信息传递问题, 或者组件层级太深需要层层传递的问题
State Reducer可以让父组件控制子组件state。render props 可以控制子组件的UI是如何渲染的，state reducer则可以控制子组件的state.
Controlled Components将原来子组件改变state的逻辑移到父组件中，由父组件控制。
异步
组件通信: broadcast dispatch state props context
其他状态管理： dva, mobx,flexible,reflux,flummox
fluxaction:当需要改变应用的状态或有 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。
mobxobservable: 通过 observable(state) 定义组件的状态，包装后的状态是一个可观察数据（Observable Data）。
observer: 通过 observer(ReactComponent) 定义组件
action: 通过 action 来修改状态。
reduxreact-redux 提供了两个重要的对象，Provider 和 connect，前者使 React 组件可被连接（connectable），后者把 React 组件和 Redux 的 store 真正连接起来。
通过 reducer 创建一个 store，每当我们在 store 上 dispatch 一个 action，store 内的数据就会相应地发生变化。
provider
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
原理 Virtual Dom 算法实现树的递归
判断属性的更改
判断列表差异算法实现 React Diff算法
遍历子元素打标识
渲染差异
详情参考 深入框架本源系列 —— Virtual Dom
Router 实现以 hash 形式（也可以使用 History API 来处理）为例，当 url 的 hash 发生变化时，触发 hashchange 注册的回调，回调中去进行不同的操作，进行不同的内容的展示。前端路由实现与 react-router 源码分析
Redux设计思想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组件设计模式快速指南
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/109996.html
摘要：纯分享直接上干货操作系统并发支持进程管理内存管理文件系统系统进程间通信网络通信阻塞队列数组有界队列链表无界队列优先级有限无界队列延时无界队列同步队列队列内存模型线程通信机制内存共享消息传递内存模型顺序一致性指令重排序原则内存语义线程 纯分享 , 直接上干货! 操作系统并发支持 进程管理内存管...
摘要：请回复这个帖子并注明组织个人信息来申请加入。版笔记等到中文字幕翻译完毕后再整理。数量超过个，在所有组织中排名前。网站日超过，排名的峰值为。主页归档社区自媒体平台微博知乎专栏公众号博客园简书合作侵权，请联系请抄送一份到赞助我们 Special Sponsors showImg(https://segmentfault.com/img/remote/1460000018907426?w=1...
摘要：主页暂时下线社区暂时下线知识库自媒体平台微博知乎简书博客园合作侵权，请联系请抄送一份到特色项目中文文档和教程与机器学习实用指南人工智能机器学习数据科学比赛系列项目实战教程文档代码视频数据科学比赛收集平台，，剑指，经典算法实现系列课本课本描述 【主页】 apachecn.org 【Github】@ApacheCN 暂时下线: 社区 暂时下线: cwiki 知识库 自媒体平台 ...
摘要：主页暂时下线社区暂时下线知识库自媒体平台微博知乎简书博客园合作侵权，请联系请抄送一份到特色项目中文文档和教程与机器学习实用指南人工智能机器学习数据科学比赛系列项目实战教程文档代码视频数据科学比赛收集平台，，剑指，经典算法实现系列课本课本描述 【主页】 apachecn.org 【Github】@ApacheCN 暂时下线: 社区 暂时下线: cwiki 知识库 自媒体平台 ...
阅读 2398·2021-11-11 11:01
阅读 3237·2021-10-11 10:57
阅读 2574·2021-09-30 09:46
阅读 3438·2021-07-26 23:38
阅读 1514·2019-08-29 12:22
阅读 630·2019-08-29 11:28
阅读 2331·2019-08-26 14:04
阅读 3019·2019-08-23 18:34
