react生命周期的基本用法

最新推荐文章于 2024-05-10 14:28:44 发布

ime33

最新推荐文章于 2024-05-10 14:28:44 发布

阅读量1.9k

点赞数 1

分类专栏：前端组件前端App开发框架文章标签： ime react 生命周期

原文链接：https://reactjs.org/blog/2019/08/08/react-v16.9.0.html

版权

前端组件同时被 2 个专栏收录

34 篇文章 1 订阅

订阅专栏

前端App开发框架

16 篇文章 1 订阅

订阅专栏

转载于：https://www.jianshu.com/p/c9bc994933d5

首先，看一下一个组件的构造


import React,{ Component } from 'react';

class Demo extends Component {
  constructor(props,context) {
      super(props,context)
      this.state = {
          //定义state
      }
  }
componentWillMount () {
}
componentDidMount () {
}
componentWillReceiveProps (nextProps) {
}
shouldComponentUpdate (nextProps,nextState) {
}
componentWillUpdate (nextProps,nextState) {
}
componentDidUpdate (prevProps,prevState) {
}
render () {
    return (
        <div></div>
    )
}
componentWillUnmount () {
}
}
export default Demo;

当然前段时间react16发布还新加了处理错误信息的生命周期 componentDidCatch（打个标记还未使用过，下次深入研究）

下面我从constructor构造函数开始，从参数，作用，用法各方面总结

1、constructor

constructor参数接受两个参数props,context
可以获取到父组件传下来的的props,context,如果你想在constructor构造函数内部(注意是内部哦，在组件其他地方是可以直接接收的)使用props或context,则需要传入，并传入super对象。


 constructor(props,context) {
  super(props,context)
  console.log(this.props,this.context) // 在内部可以使用props和context
}

当然如果你只需要在构造函数内使用props或者context，那么只传入一个参数即可，如果都不可以，就都不传。

关于ES6的class constructor和super

只要组件存在constructor,就必要要写super,否则this指向会错误


 constructor() {
  console.log(this) // 报错，this指向错误
}

2、componentWillMount 组件将要挂载

1、组件刚经历constructor,初始完数据
2、组件还未进入render，组件还未渲染完成，dom还未渲染

componentWillMount 一般用的比较少，更多的是用在服务端渲染，（我还未使用过react服务端渲染哈，所以也写不了很多）
但是这里有一个问题

ajax请求能写在willmount里吗？
：答案是不推荐，别这么写

1.虽然有些情况下并不会出错，但是如果ajax请求过来的数据是空，那么会影响页面的渲染，可能看到的就是空白。
2.不利于服务端渲染，在同构的情况下，生命周期会到componentwillmount，这样使用ajax就会出错

3、componentDidMount 组件渲染完成

组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染

4.componentWillReceiveProps (nextProps)

componentWillReceiveProps在接受父组件改变后的props需要重新渲染组件时用到的比较多
它接受一个参数

1.nextProps
通过对比nextProps和this.props，将nextProps setState为当前组件的state，从而重新渲染组件


componentWillReceiveProps (nextProps) {
    nextProps.openNotice !== this.props.openNotice && this.setState({
        openNotice:nextProps.openNotice
    }，() => {
      console.log(this.state.openNotice:nextProps) //将state更新为nextProps,在setState的第二个参数（回调）可以打印出新的state
  })
}

关于setState的用法及深入了解后面会专门整理一篇文章

5.shouldComponentUpdate(nextProps,nextState)

唯一用于控制组件重新渲染的生命周期，由于在react中，setState以后，state发生变化，组件会进入重新渲染的流程，（暂时这么理解，其实setState以后有些情况并不会重新渲染，比如数组引用不变）在这里return false可以阻止组件的更新

因为react父组件的重新渲染会导致其所有子组件的重新渲染，这个时候其实我们是不需要所有子组件都跟着重新渲染的，因此需要在子组件的该生命周期中做判断

对于react初学者，可能涉及这个生命周期的机会比较少，但是如果你的项目开始注重性能优化，随着你对react的喜爱和深入，你就会用到这个生命周期

6.componentWillUpdate (nextProps,nextState)

shouldComponentUpdate返回true以后，组件进入重新渲染的流程，进入componentWillUpdate,这里同样可以拿到nextProps和nextState

7.render函数

render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染

react16中 render函数允许返回一个数组，单个字符串等，不在只限制为一个顶级DOM节点，可以减少很多不必要的div(当然注意升级你的react版本，将现有项目升到react16并不会出现什么bug，唯一注意的是proTypes类型检测换了名字~)

意思你现在可以这样：

render () {
  return " "

}
或者这样：


render () {
  return [
                <div></div>
             <div></div>

]
}

8、componentDidUpdate(prevProps,prevState)

组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state。
如果你理解了组件一次重新渲染的过程，那么你应该理解下面5处打印出来的state应该是相同的。（关于setState异步是同步的理解，后面也会整理一篇文章~）


componentWillReceiveProps (nextProps,nextState) {
    this.setState({
        fengfeng:nextProps.fengfeng
    },()=>{
        console.log(this.state.fengfeng) //1
    })
    
}
shouldComponentUpdate (nextProps,nextState) {
    console.log(nextState.fengfeng)  //2
}
componentWillUpdate (nextProps,nextState) {
    console.log(nextState.fengfeng)  //3
}
componentDidUpdate (prevProps,prevState) {
    console.log(this.state.fengfeng) //5
}
render () {
    console.log(this.state.fengfeng) //4
    return (
        <div></div>
    )
}

9、componentWillUnmount ()

componentWillUnmount也是会经常用到的一个生命周期，初学者可能用到的比较少，但是用好这个确实很重要的哦

1.clear你在组建中所有的setTimeout,setInterval
2.移除所有组建中的监听 removeEventListener
3.也许你会经常遇到这个warning:


Can only update a mounted or mounting component. This usually means you called setState() on an       
 unmounted component. This is a no-op. Please check the code for the undefined component.

是因为你在组建中的ajax请求返回中setState,而你组件销毁的时候，请求还未完成，因此会报warning
解决办法为


componentDidMount() {
    this.isMount === true
    axios.post().then((res) => {
     this.isMount && this.setState({   // 增加条件ismount为true时
      aaa:res
    })
})
}
componentWillUnmount() {
    this.isMount === false
}

作者：Evan_zhan
链接：https://www.jianshu.com/p/c9bc994933d5
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

React】345- React v16.9 新特性

今天我们发布了 React 16.9。它包含了一些新特性、bug修复以及新的弃用警告，以便与筹备接下来的主要版本。

一、新弃用

重命名 Unsafe 生命周期方法

一年前，我们宣布 unsafe 生命周期方法重命名为：

componentWillMount → UNSAFE_componentWillMount
componentWillReceiveProps → UNSAFE_componentWillReceiveProps
componentWillUpdate → UNSAFE_componentWillUpdate

React v16.9 不包含破坏性更改，而且旧的生命周期方法在此版本依然沿用。但是，当你在新版本中使用旧的生命周期方法时，会提示如下警告：

Warning:componentWillMount has been renamed,and is not recommended for use.

正如警告所示，对于每种 unsafe 的方法，通常有更好的解决方案。但你可能没有过多时间去迁移或测试这些组件。在这种情况下，我们建议运行一个自动重命名它们的 codemod 脚本：

cd your_project
npx react-codemod rename-unsafe-lifecycles

（注意：这里使用的是 npx，不是 npm ，npx 是 Node 6+ 默认提供的实用程序。）

运行 codemod 将会替换旧的生命周期，如 componentWillMount 将会替换为 UNSAFE_componentWillMount :

Codemode in action

新命名的生命周期（例如：UNSAFE_componentWillMount）在 React 16.9 和 React 17.x 继续使用，但是，新的 UNSAFE_ 前缀将帮助具有问题的组件在代码 review 和 debugging 期间脱颖而出。（如果你不喜欢，你可以引入严格模式（Strict Mode）来进一步阻止开发人员使用它。）

点击此链接，学习更多关于版本策略以及稳定性承诺

弃用：javascript: URLs

以 javascript: 开头的 URL 很容易遭受攻击，因为它很容易意外在标签中（<a href>）引入未经处理的输出，造成安全漏洞。

const userProfile = {
  website: "javascript: alert('you got hacked')",
};
// This will now warn:
<a href={userProfile.website}>Profile</a>

在 React 16.9 中，这种模式将继续有效，但它将输出一个警告，如果你逻辑上需要使用 javascript: 开头的 URL，请尝试使用 React 事件处理程序代替。（万不得已，你可以使用 dangerouslySetInnerHTML 来规避保护，但仍然是不鼓励使用的并且往往会导致安全漏洞。）

在未来的主要版本中，如果遇到 javascript: 形式的 URL，React 将抛出错误。

弃用 “Factory” 组件

在用 Babel 编译 JavaScript 类流行前，React 支持 “factory” 组件，它使用 render 方法返回一个对象。

function FactoryComponent() {
  return { render() { return <div />; } }
}

这种模式令人困惑，因为它看起来太像一个函数组件，但它不是一个。(函数组件只会返回像上述示例中的 <div /> ）。

这种模式几乎从未在外部使用过，并且支持它会导致 React 变大、变慢。因此，我们在 16.9 中弃用此模式，并且遇到时，输出警告。如果你在项目中依赖此组件，可以添加 FactoryComponent.prototype = React.Component.prototype 作为解决方法。或者，你可以将它转换为 class 组件或函数组件。

我们预计大多数代码库不会受此影响。

二、新特性

用于测试的一部函数 `act()`

React 16.8 引入了名为 act() 的新测试实用程序来帮助你编写更匹配浏览器行为的测试代码。例如，对单个 act() 中的多个状态更新进行批处理。这与 React 已有的处理真实浏览器事件时的工作方式相匹配，并有助于为将来 React 组件更频繁地批处理更新做准备。

然而，React v16.8 中的 act() 仅支持同步函数，有时，你可能在测试环境下看到以下警告，但无法轻易修复：

An update to SomeComponent inside a test was not wrapped in act(...).

在 React 16.9 中 act() 支持异步函数 ，你可以在调用它时，使用 await ：

await act(async () => {
  // ...
});

这将解决以前无法使用 act() 的情况，例如当 state 更新位于异步函数中时。因此，你现在应该能够测试中修复所有关于 act() 的警告了 。

我们听说，现在还没有足够的信息关于如何使用 act() 编写测试用例。新的测试技巧指南介绍了一些常见方案，以及 act() 如何帮助您编写良好的测试。这些示例使用原生 DOM API，但您也可以使用 React Testing Library 来减少样板代码。它的许多方法已经在内部使用 act() 。

如果你遇到 act() 的相关问题，请在问题跟踪器上告知我们，我们会尽力提供帮助。

使用 <React.Profiler> 进行性能评估

在 React 16.5 中，我们介绍了新的 React Profiler for DevTools 来帮助开发人员发现项目中的性能瓶颈。在 React 16.9 中，我们提供了一种编程的方式来收集测量你的代码，这就是 <React.Profiler> ，我们预计大多数较小的应用不会使用它，但在大型应用中跟踪性能回归会很方便。

<Profiler> 测量 React 应用程序渲染的频率以及渲染的 "成本" 。其目的是帮助识别应用程序中渲染缓慢的部分，并且可能更益与 memoization 等优化。

可以将 <Profiler> 添加到 React 项目中的任意一个子树上，来测量该子树的渲染成本。它需要两个 props ：id (string) 和 onRender 回调(function)，当树中的组件"提交"更新时，React 将调用它。

render(
  <Profiler id="application" onRender={onRenderCallback}>
    <App>
      <Navigation {...props} />
      <Main {...props} />
    </App>
  </Profiler>
);

要了解关于 Profiler 和传递给 onRender 回调的参数的更多详细信息，请查看 Profiler 文档。

注意： Profiling 会增加一些额外的开销，因此在生产构建中禁止使用它。如果想要在生产环境中进行性能分析，React 提供了特殊的生产构建，并启用了分析模式。在 fb.me/react-profiling 阅读更多关于如何使用此构建的更多信息。

三、显著的 bug 修复

此版本包含一些一些其他显著的提升：

在组件中调用 findDOMNode() 造成崩溃，已修复
保存已删除的子树导致内存泄漏，已修复
在 useEffect 中，使用 setState 引起的循环引用，现在会输出错误（这与在 class 组件中的 componentDidUpdate 使用 setState 导致的错误一致）

转自：https://cloud.tencent.com/developer/article/1504898

原文：https://reactjs.org/blog/2019/08/08/react-v16.9.0.html

ime33

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
react生命周期的基本用法

转载于：https://www.jianshu.com/p/c9bc994933d5首先，看一下一个组件的构造import React,{ Component } from 'react';class Demo extends Component { constructor(props,context) { super(props,context) ...
复制链接

扫一扫