前端开发面试总结（三）

同young不同样
301 阅读5分钟

React生命周期

React的生命周期分为三个阶段：1、初始化，2、更新，3、销毁。

初始化阶段

  • 1、getDefaultProps()：设置默认的props，也可以用defaultProps设置组件的默认属性。这个函数在React的生命周期中只会调用一次。
  • 2、getInitialState()：在每一个组件的实例中这个方法的调用只有一次，用来初始化每一个实例的state，React的state和props的区别主要是state只存在与组件的内部，props可以在所有的实例中共享。
  • 3、componentWillMount()：该方法只会在组件初始化的时候被调用，在组件存在期间则不会被调用。该方法在整个生命周期中只会被调用一次，可以修改state。
  • 4、render()：render()函数在执行的过程中，最重要的操作是创建虚拟DOM，运行diff算法，更新DOM树的操作都会在这个函数中进行。
  • 5、componentDidMount()：该方法会在组件被渲染完成之后调用，而且只会被调用一次。

更新阶段

  • 6、componentWillReceiveProps(nextProps)：该方法在组件初始化的时候不会被调用，当组件在接收新的props的时候才会调用这个函数。
  • 7、shouldComponentUpdate(nextProps, nextState)：这是React性能优化过程中最重要的一环，当组件在接收新的state或者props时会被调用。可以在这个函数中判断前后的两个props或者state是否相同，如果相同就返回false阻止DOM更新，这样一来就不需要再执行diff算法进行比较，也不用渲染新的DOM树，这样可以大幅度的提高代码运行的性能。可以人为的在这个方法中返回false，阻止DOM更新。
  • 8、componentWillUpdate(nextProps, nextState)：组件初始化的时候不会调用这个函数，只有在组件将要发生更新之前调用这个函数，在这个函数中可以修改state。
  • 9、render()：实现组件渲染。

卸载

  • 10、componentWillUnmount()：该方法会在组件将要被卸载的时候调用。

生命周期函数在实例化阶段被调用的过程：

(1)当组件在客户端被实例化时，以下的函数将被依次调用

  • 1、getDefaultProps()
  • 2、getInitialState()
  • 3、componentWillMount()
  • 4、render()
  • 5、componentDidMount()

(2)当组件在服务端被实例化时，以下的函数将被依次调用

  • 1、getDefault()
  • 2、getInitialState()
  • 3、componentWillMount()
  • 4、render()
render()方法

该方法在执行的时候会创建一个虚拟的DOM，用于表示对组件的输出，render()方法是每一个组件都必须要有的方法，render()方法必须要满足以下几点：

  • 1、只能通过this.props和this.state这两种方式访问数据。
  • 2、render()方法可以返回null，false或者任何React组件。
  • 3、render()只能返回一个顶级组件或者元素，不可以返回多个组件或者元素。
  • 4、render()函数中不能改变组件的状态。
  • 5、不能修改DOM的输出。
  • 6、render()函数最终返回的不是真正的DOM元素，而是一个虚拟的DOM树。
componentDidMount()

这个方法不会在服务端被渲染的时候调用，该方法会在DOM渲染完成之后被调用，可以在该方法中使用this.getDOMNode()访问到真实的DOM。推荐使用ReactDOM.findDOMMode()获得真实的DOM元素。虚拟DOM只是存在于内存中的一种数据结构，只有在真正插入到文档中之后才会变成真正的DOM节点。

组件在存在期间，以下函数将会被依次调用

  • 1、componentWillReceiveProps()
  • 2、shouldComponentWillUpdate()
  • 3、componentWillUpdate()
  • 4、render()
  • 5、componentDidMount()

Redux数据流的流程

Redux是一种Javascript状态容器，提供可预测的状态管理。可预测指的是根据一个固定的输入就可以得到一个固定的结果。

Redux的意义：随着单页面应用的普及，web app内部需要管理的状态也越来越多，这些状态有的来自于服务器，有用于交互的数据，有组件的状态，Redux就是用来对这些状态进行统一管理的。

Redux的三个原则：

  • 1、单一的数据源：所有的state都被存储到一个单一的数据源store中。
  • 2、state是只读的：state是只读的，能改变state的唯一方式就是通过触发action来修改state。
  • 3、使用纯函数进行修改：需要编写reducers来描述action如何改变redux，reducers是一些纯函数，根据action返回对应的state，而且必须要有返回。

action

action可以用来修改state的值，而且action是修改state的唯一的方法。action是一个普通的javascript对象，该对象必须有一个type字段，表示action的名称，

reducer

reducer用于描述action如何对state进行修改，Reducer是一种纯函数。

store

store是redux的唯一的数据源。

使用Redux

  • 安装Redux
npm install redux --save

Redux如何实现多个组件之间的通信？多个组件使用相同的状态如何管理？

Redux中提供了connect和provide来实现多个组件之间的通信，管理多个组件使用的相同的状态。

connect()函数

export connect(mapStateToProps, mapDispatchToProps)(Home)
  • (1)mapStateToProps

mapStateToProps是一个函数，用于建立一个从外部的state对象到UI组件的props对象的映射关系。接收state作为参数，最终返回一个对象。mapStateToProps会订阅store，当state更新的时候就会自动执行。重新计算UI组件的参数，触发UI组件的重新渲染。

  • (2)mapDispatchToProps

mapDispatchToProps是connect函数的第二个参数，用来建立UI组件的参数到store.dispatch方法的映射。也就是说，它定义了哪些用户操作应该当做Action传给Store。

Provider

connect方法生成容器组件以后，需要让容器组件拿到state对象，才能生成UI组件的参数。Provider就是把我们用Redux创建的store传递到内部的其他组件，让内部组件可以享有这个store并提供对state的更新。

avatar
文章
阅读
粉丝