标签：执行 属性 set 代理 import nap http https 事件
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，首次加载、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
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("不支持")} //[可选]：在不支持文件格式的情况下呈现的组件。 />
标签：执行 属性 set 代理 import nap http https 事件
原文地址：https://www.cnblogs.com/dongxiaolei/p/13931198.html
