react学习

Posted dongxiaolei

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react学习相关的知识,希望对你有一定的参考价值。

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("不支持")} //[可选]:在不支持文件格式的情况下呈现的组件。
  />

 

以上是关于react学习的主要内容,如果未能解决你的问题,请参考以下文章

javascript 用于在节点#nodejs #javascript内设置react app的代码片段

中继片段传播不起作用

前端开发工具vscode如何快速生成代码片段

前端开发工具vscode如何快速生成代码片段

[React Testing] Use Generated Data in Tests with tests-data-bot to Improve Test Maintainability(代码片段

react简介