React 手稿

24

React 按需加载 - 代码分隔

小翼 2018-12-11 发布
16 收藏

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

4

React手稿之State Hooks of Hooks

小翼 2018-12-05 发布
3 收藏

React HooksReact在16.7.0-alpha.0版本中提到了Hooks的概念，目前还是Proposal阶段。官方也陈述，接下来的90%的工作会投入到React Hooks中。从目前官方的文档可以看出，Hooks从以下四个方面来提高React的编码。st...

1

React手稿 - Context

小翼 2018-11-20 发布
1 收藏

ContextContext提供了除props之外的传参数的方式。Context是全局跨组件传递数据的。APIReact.createContext {代码...} Provider {代码...} Consumer {代码...} ExampleThemeContext.js {代码...} ThemedButton.js...

3

React手稿之类型检查

小翼 2018-11-16 发布
3 收藏

Typechecking With PropTypes类型检查是为了确保传入组件的参数正确性。通常在项目中可以使用Flow或者TypeScript来实现。React提供了PropTypes来检查类型。示例： {代码...} PropTypes {代码...} Requiring Singl...

9

React手稿之高阶组件

小翼 2018-11-15 发布
7 收藏

Higher-Order ComponentsHOC 不是React的标准API。HOC 是一个函数。HOC 返回一个Component。示例： {代码...} 使用场景代码复用类似React 0.15版本之前的mixin。多个组件同用一段代码，或者同样的方法时，可以使...

9

React手稿之 React-Saga

小翼 2018-11-12 发布
8 收藏

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

13

React手稿之 React-Redux

小翼 2018-11-09 发布
12 收藏

React-ReduxReduxAction {代码...} type 属性是必须的。Reducer {代码...} 1、需要一个case与action的type一致。2、必须在switch的defautl返回原state。Store管理整个应用的 state提供getState()方法，可以获取st...

3

React 手稿 - Component state

小翼 2018-11-08 发布
2 收藏

Component state实例： {代码...} Timer 在线实例定义写在constructor函数中，是一个Object对象。一般情况下需要指定默认值，预防抛undefined.使用在组件中通过访问组件对象属性的方式。直接获取：this.state.tim...

6

React16.3.0以后的生命周期(二) - 更新、卸载、异常

小翼 2018-11-07 发布
6 收藏

static getDerivedStateFromProps()当本地state需要根据props来改变的时候可调用此方法。这个方法是在render()前会被执行，只要执行render()都会被在之前被触发。该方法有两个参数props和state; 返回值为state对...

12

React16.3.0以后的生命周期(一) - 组件加载

小翼 2018-11-07 发布
9 收藏

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

14

React.memo

小翼 2018-11-07 发布
11 收藏

介绍React.memo之前，先了解一下React.Component和React.PureComponent。React.ComponentReact.Component是基于ES6 class的React组件。React允许定义一个class或者function作为组件，那么定义一个组件类，就需要...