我们现在大多数React项目都是以Webpack 或者 Browserify等将一堆的jsx文件组织一起，并且由一个类似index.js的入口文件串联起来的单页面web页面。

React HooksReact在16.7.0-alpha.0版本中提到了Hooks的概念，目前还是Proposal阶段。官方也陈述，接下来的90%的工作会投入到React Hooks中。从目前官方的文档可以看出，Hooks从以下四个方面来提高React的编码。state生命周期content自定义方法Hooks的主要用途是替代之前版本的 class 组件。说明：到目前为止，React在已...

ContextContext提供了除props之外的传参数的方式。Context是全局跨组件传递数据的。APIReact.createContext {代码...} Provider {代码...} Consumer {代码...} ExampleThemeContext.js {代码...} ThemedButton.jsx {代码...} App.js {代码...} 在线示例推荐阅读《React 手稿》

Typechecking With PropTypes类型检查是为了确保传入组件的参数正确性。通常在项目中可以使用Flow或者TypeScript来实现。React提供了PropTypes来检查类型。示例： {代码...} PropTypes {代码...} Requiring Single Child {代码...} Default Prop Values {代码...} 以上内容在实现一个通用React组件时非常有用。类型检查...

Higher-Order ComponentsHOC 不是React的标准API。HOC 是一个函数。HOC 返回一个Component。示例： {代码...} 使用场景代码复用类似React 0.15版本之前的mixin。多个组件同用一段代码，或者同样的方法时，可以使用HOC。示例： {代码...} 在线示例抽象state和更改props可以通过WrappedComponent包裹的组件公共state抽象出...

redux-saga 是一个用于管理应用程序副作用（例如异步获取数据，访问浏览器缓存等）的javascript库，它的目标是让副作用管理更容易，执行更高效，测试更简单，处理故障更容易。

React-ReduxReduxAction {代码...} type 属性是必须的。Reducer {代码...} 1、需要一个case与action的type一致。2、必须在switch的defautl返回原state。Store管理整个应用的 state提供getState()方法，可以获取state通过dispatch(action)设置state提供subscribe(listener)注册和取消注册监听事件React-Redux是Redux的Rea...

Component state实例： {代码...} Timer 在线实例定义写在constructor函数中，是一个Object对象。一般情况下需要指定默认值，预防抛undefined.使用在组件中通过访问组件对象属性的方式。直接获取：this.state.time. 我们通常会先获取state数据，再渲然到页面，例如： {代码...} setState先看一段代码： {代码...} 数据单...

static getDerivedStateFromProps()当本地state需要根据props来改变的时候可调用此方法。这个方法是在render()前会被执行，只要执行render()都会被在之前被触发。该方法有两个参数props和state; 返回值为state对象, 不需要返回整体state，把需要改变的state返回即可。示例： {代码...}

constructor()构造方法。这个方法有两个目的：初始化一个本地state。 {代码...} 要避免将props参数直接赋值给state, this.state = {color: props.color}是不允许 的

介绍React.memo之前，先了解一下React.Component和React.PureComponent。React.ComponentReact.Component是基于ES6 class的React组件。React允许定义一个class或者function作为组件，那么定义一个组件类，就需要继承React.Component.例如： {代码...} 注意：继承React.Component的React组件类中，render()为必须方法，其...