React 按需加载 - 代码分隔

2018-12-11
阅读 3 分钟
10k
我们现在大多数React项目都是以Webpack 或者 Browserify等将一堆的jsx文件组织一起,并且由一个类似index.js的入口文件串联起来的单页面web页面。

React手稿之State Hooks of Hooks

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

React手稿 - Context

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

React手稿之类型检查

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

React手稿之高阶组件

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

React手稿之 React-Saga

2018-11-12
阅读 2 分钟
2.9k
redux-saga 是一个用于管理应用程序副作用(例如异步获取数据,访问浏览器缓存等)的javascript库,它的目标是让副作用管理更容易,执行更高效,测试更简单,处理故障更容易。

React手稿之 React-Redux

2018-11-09
阅读 3 分钟
1.9k
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...

React 手稿 - Component state

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

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

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

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

2018-11-07
阅读 2 分钟
4.8k
constructor()构造方法。这个方法有两个目的:初始化一个本地state。 {代码...} 要避免将props参数直接赋值给state, this.state = {color: props.color}是不允许 的

React.memo

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