您可以通过左右滑屏查看更多笔记内容。。

使用真实的api

02 Sep 2019 . category: tech .
更多笔记

使用真实的API

一.生命周期方法

生命周期的方法是嵌入React组件生命周期中的一组挂钩,他们可以在ES6类组件中使用,但是不能在无状态组件中使用;

  1. constructor(构造函数):只有在组件实例化并插入到 DOM 中的时候才会被调用。组件实例化的过程称作组件的挂载(mount)。
  2. render() 方法:也会在组件挂载的过程中被调用,同时当组件更新的时候也会被调用。每当组件的状态(state)或者属性(props)改变时,组件的 render() 方法都会被调用。
  3. 挂载过程中有四个生命周期方法,它们的调用顺序是这样的:
    • constructor()
    • componentWillMount()
    • render()
    • componentDidMount()
  4. 当组件的状态或者属性改变的时候用来更新组件的生命周期是什么样的呢?总的来说, 它一共有5个生命周期方法用于组件更新,调用顺序如下:
    • componentWillReceiveProps()
    • shouldComponentUpdate()
    • componentWillUpdate()
    • render()
    • componentDidUpdate()
  5. 组件卸载也有生命周期。它只有一个生命周期方法: componentWillUn-mount() 。

生命周期方法的适用场景;

  1. constructor(props) - 它在组件初始化时被调用。在这个方法中,你可以设置初始化状态以及绑定类方法。
  2. componentWillMount() - 它在 render() 方法之前被调用。这就是为什么它可以用作去设置组件内部的状态,因为它不会触发组件的再次渲染。但一般来说,还是推荐在 constructor() 中去初始化状态。
  3. **render() **- 这个生命周期方法是必须有的,它返回作为组件输出的元素。这个方法应该是一个纯函数,因此不应该在这个方法中修改组件的状态。它把属性和状态作为输入并且返回(需要渲染的)元素
  4. componentDidMount() - 它仅在组件挂载后执行一次。这是发起异步请求去 API 获取数据的绝佳时期。获取到的数据将被保存在内部组件的状态中然后在 render() 生命周期方法中展示出来。
  5. componentWillReceiveProps(nextProps) - 这个方法在一个更新生命周(update lifecycle)中被调用。新的属性会作为它的输入。因此你可以利用 this.props 来对比之后的属性和之前的属性,基于对比的结果去实现不同的行为。此外,你可以基于新的属性 来设置组件的状态。
  6. **shouldComponentUpdate(nextProps, nextState) **- 每次组件因为状态或者属性更改而更新时,它都会被调用。你将在成熟的 React 应用中使用它来进行性能优化。在一个更新生命周期中,组件及其子组件将根据该方法返回的布尔值来决定是否重新渲染。这样你可以阻止组件的渲染生命周期(render lifecycle)方法,避免不必要的渲染。
  7. componentWillUpdate(nextProps, nextState) - 这个方法是 render() 执行之前的最后一 个 方 法。 你 已 经 拥 有 下 一 个 属 性 和 状 态, 它 们 可 以 在 这 个 方 法 中 任 由 你 处置。你可以利用这个方法在渲染之前进行最后的准备。注意在这个生命周期方法 中 你 不 能 再 触 发 setState() 。如 果 你 想 基 于 新的 属 性 计 算 状 态, 你 必 须 利 用componentWillReceiveProps() 。
  8. **componentDidUpdate(prevProps, prevState) **- 这个方法在 render() 之后立即调用。你可以用它当成操作 DOM 或者执行更多异步请求的机会。
  9. **componentWillUnmount() **- 它会在组件销毁之前被调用。你可以利用这个生命周期方法去执行任何清理任务。