1.state属性
state顾名思义就是状态，它只是用来控制这个组件本身自己的状态，我们可以用state来完成对行为的控制、数据的更新、界面的渲染.
setState更新是异步的，事件处理过程 setState 不会同步更新 this.state， React 控制之外的情况， setState 会同步更新 this.state
总结：尽量少地用 state，尽量多地用 props。原因是这样会降低代码维护的难度，也会在一定程度上增强组件的可复用性，react鼓励我们编写函数式组件。
2.componentDidUpdate：
react函数每次更新组件（或者数据）都需要this.setState(state)来进行，
这里补充每次调用setState()结束之后都会自动调用componentDidUpdate()钩子，
因此，如果有每次更新都要进行的行动都可以写在这个钩子中
componentDidUpdate(prevProps, prevState) { <!--一定要给个判断条件，不然就会死循环--> if (prevProps.data !== this.props.data) { const { data } = this.props; if (data) { this.setState({ data }); } } }
3、render
-
我们经常会看到render执行很多次，通常render渲染有以下情况：
- 首次加载，即数据进来首先执行render渲染基本页面组件
- setState改变组件内部state。（只要触发setState一次就会render一次）
- 接受到新的props
注：一般情况下我们会有三次render，首次加载、componentDidMount发送ajax时render、得到回应render
4、dva中间连接器（dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。）
5、react钩子函数
1）.constructor(props, context) 构造函数，在创建组件的时候调用一次。 2）componentWillMount() 在组件render之前立即调用 Tip1: 不建议在此请求数据，由于请求数据接口一般都是异步，这时候render已经被执行，建议在componentDidMount 数据 Tip2: 如果在服务端渲染，该钩子函数将被调用两次，一次服务端，一次浏览器端，而componentDidMount函数只会在浏览器端请求一次 Tip3: 在taro构建的小程序里对应的生命周期是 onLoad。 3）componentDidMount() 所有的组件（包括子组件）在render执行完之后立即调用，并且只会被调用一次。 Tip: 建议在此请求数据 4）componentWillReceiveProps(nextProps) 在props被改变时被触发，初始化render时不调用。 旧的属性还是可以通过this.props来获取，在这里通过调用this.setState()来更新你的组件状态。 Tip1: 某些情况下，props没变也会触发该钩子函数，需要在方法里手动判断一下this.props和nextProps是否相同，不相同了才执行我的更新方法。 Tip2：该函数一般用来更新依赖props的状态 5） shouldComponentUpdate(nextProps, nextState) 发生重渲染时，在render()函数调用前被调用的函数，当函数返回false时候，阻止接下来的render()函数的调用，阻止组件重渲染，而返回true时，组件照常重渲染。 该方法并不会在初始化渲染或当使用forceUpdate()时被调用。 6）componentWillUpdate(nextProps, nextState) shouldComponentUpdate返回true或者调用forceUpdate之后，componentWillUpdate会被调用。 7.）getSnapshotBeforeUpdate(prevProps, prevState) 该函数在最新的渲染输出提交给DOM前将会立即调用。它让你的组件能在当前的值可能要改变前获得它们。这一生命周期返回的任何值将会 作为参数被传递给componentDidUpdate()。 8） componentDidUpdate(prevProps, prevState) 除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。 9）componentWillUnmount() 在组件被卸载和销毁之前立刻调用。可以在该方法里处理任何必要的清理工作，例如解绑定时器，取消网络请求，清理任何在componentDidMount环节创建的DOM元素。 10）componentDidCatch(error, info) 该函数称为错误边界，捕捉发生在子组件树中任意地方的JavaScript错误，打印错误日志，并且显示回退的用户界面。 Tip：错误边界只捕捉树中发生在它们之下组件里的错误。一个错误边界并不能捕捉它自己内部的错误。 11）render() render是一个React组件所必不可少的核心函数（上面的其它函数都不是必须的）。 Tip：记住，不要在render里面修改state。 12.React组件更新路径 参考：https://www.jianshu.com/p/e7f7967f8928
6、react-file-viewer插件（实现pdf,word,xlsx文件预览）
1)npm install react-file-viewer
2)在组建中引入import FileViewer from 'react-file-viewer';
3)直接使用（涉及到跨域文题自行解决可以使用代理来解决别的方案也可行）
<FileViewer fileType='docx'//文件类型 filePath={wo} //文件地址 onError={this.onError.bind(this)} //函数[可选]：当文件查看器在获取或呈现请求的资源时发生错误时将调用的函数。在这里可以传递日志记录实用程序的回调。 errorComponent={console.log("出现错误")} //[可选]：发生错误时呈现的组件，而不是react-file-viewer随附的默认错误组件。 unsupportedComponent={console.log("不支持")} //[可选]：在不支持文件格式的情况下呈现的组件。 />
7、
Action 是把数据从应用（译者注：这里之所以不叫 view 是因为这些数据有可能是服务器响应，用户输入或其它非 view 的数据 ）传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。
添加新 todo 任务的 action 是这样的：
const ADD_TODO = 'ADD_TODO' { type: ADD_TODO, text: 'Build my first Redux app' }
8、ES6 const变量加大括号
将属性从对象提取到变量中是一种简单的方式。 // you can rewrite this const name = app.name; const version = app.version; const type = app.type; // as this const { name, version, type } = app;
相当于const name =app.name,const version=app.version,const type=app.version
9、Object.keys()返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键名
var obj = { foo: "bar", baz: 42 }; Object.keys(obj) // ["foo", "baz"]
Object.values()返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键值
var obj = { foo: "bar", baz: 42 }; Object.values(obj) // ["bar", 42]
Object.entries返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键值对数组。
var obj = { foo: 'bar', baz: 42 }; Object.entries(obj) // [ ["foo", "bar"], ["baz", 42] ]
PureComponent 与Component
当组件更新时，如果组件的props和state都没发生改变，render方法就不会触发，用 PureComponent 省去 Virtual DOM 的生成和比对过程，达到提升性能的目的。
反之如果组件的props和state经常发生改变则用Component。