react学习

Posted 2020-12-21 dongxiaolei

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渲染有以下情况：

  1. 首次加载，即数据进来首先执行render渲染基本页面组件
  2. setState改变组件内部state。（只要触发setState一次就会render一次）
  3. 接受到新的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("不支持")} //[可选]：在不支持文件格式的情况下呈现的组件。
  />