使用React Hooks模拟生命周期_react hooks 生命周期_barnett_y的博客

link之家
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
constructor

class 组件
class Example extends Component {
    constructor() {
        super();
        this.state = {
            count: 0
    render() {
      return null;
函数组件不需要构造函数,可以通过调用 useState 来初始化 state 
function Example() {
  const [count, setCount] = useState(0);
  return null;
componentDidMount 
class 组件访问 componentDidMount 
class Example extends React.Component {
  componentDidMount() {
    console.log('I am mounted!');
  render() {
    return null;
使用 hooks 模拟 componentDidMount 
function Example() {
  useEffect(() => console.log('mounted'), []);
  return null;
useEffect 拥有两个参数，第一个参数作为回调函数会在浏览器布局和绘制完成后调用，因此它不会阻碍浏览器的渲染进程。
 第二个参数是一个数组 
当数组存在并有值时，如果数组中的任何值发生更改，则每次渲染后都会触发回调。
当它不存在时，每次渲染后都会触发回调。
当它是一个空列表时，回调只会被触发一次，类似于 componentDidMount。 
shouldComponentUpdate 
class 组件访问 shouldComponentUpdate 
shouldComponentUpdate(nextProps, nextState){
  console.log('shouldComponentUpdate')
  // return true 更新组件
  // return false 则不更新组件
hooks 模拟 shouldComponentUpdate 
const MyComponent = React.memo(
    _MyComponent, 
    (prevProps, nextProps) => nextProps.count !== prevProps.count
React.memo 包裹一个组件来对它的 props 进行浅比较,但这不是一个 hooks，因为它的写法和 hooks 不同,其实React.memo 等效于 PureComponent，但它只比较 props。 
componentDidUpdate 
class 组件访问 componentDidUpdate 
componentDidMount() {
  console.log('mounted or updated');
componentDidUpdate() {
  console.log('mounted or updated');
使用 hooks 模拟 componentDidUpdate 
useEffect(() => console.log('mounted or updated'));
值得注意的是，这里的回调函数会在每次渲染后调用，因此不仅可以访问 componentDidUpdate，还可以访问componentDidMount，如果只想模拟 componentDidUpdate，我们可以这样来实现。 
const mounted = useRef();
useEffect(() => {
  if (!mounted.current) {
    mounted.current = true;
  } else {
   console.log('I am didUpdate')
useRef 在组件中创建“实例变量”。它作为一个标志来指示组件是否处于挂载或更新阶段。当组件更新完成后在会执行 else 里面的内容，以此来单独模拟 componentDidUpdate。 
componentWillUnmount 
class 组件访问 componentWillUnmount 
componentWillUnmount() {
  console.log('will unmount');
hooks 模拟 componentWillUnmount 
useEffect(() => {
  return () => {
    console.log('will unmount');
}, []);
当在 useEffect 的回调函数中返回一个函数时，这个函数会在组件卸载前被调用。我们可以在这里面清除定时器或事件监听器。 
引入 hooks 的函数组件功能越来越完善，在多数情况下，我们完全可以使用 hook 来替代 class 组件。并且使用函数组件也有以下几点好处。 
纯函数概念，同样的 props 会得到同样的渲染结果。
可以使用函数组合，嵌套，实现功能更加强大的组件。
组件不会被实例化，整体渲染性能得到提升。 
但是 hooks 模拟的生命周期与class中的生命周期不尽相同，我们在使用时，还是需要思考业务场景下那种方式最适合。 
blog.solutotlv.com/react-class…
dev.to/trentyang/r…
                    前言在 React 16.8 之前，函数组件只能是无状态组件，也不能访问 react 生命周期。hook 做为 react 新增特性，可以让我们在不编写 class 的情况下使用 state 以及其他的 react 特性，例如生命周期。接下来我们便举例说明如何使用 hooks 来模拟比较常见的 class 组件生命周期。constructorclass 组件class Example extends Component {    constructor() {        sup
				项目说明/项目说明
EN：使用useEffect和useState的示例（SIMPLE）应用程序
EN：使用useEffect和useState的示例（SIMPLE）应用程序
先决条件/先决条件（最好在chrome上进行测试/最好在chrome上进行测试）
 ZH：开始之前，您需要在计算机上安装以下工具：[Git]（  ），[Node.js]（  ）。 另外，最好有一个编辑器来处理像[VSCode]（  ）这样的代码。
 ZH：开始之前，您需要在计算机上安装以下工具：[Git]（  ），[Node.js]（  ）。 另外，最好有一个编辑器来处理像[VSCode]（  ）这样的代码。
克隆此存储库/克隆此存储库
$ git clone 
在/ cmd /中访问项目文件夹/在cmd /终端中访问项目文件夹
$ cd react-hooks
安装依赖项/安装依赖项
$ npm安装
				就像Android开发中的View一样，ReactNative（RN）中的组件也有生命周期（Lifecycle）。所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。RN组件的生命周期整理如下图：如图，可以把组件生命周期大致分为三个阶段：第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面；第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作。生命周期回调函数在组件创建之前，会先调用getD
在日常的开发中，从服务器端异步获取数据并渲染是相当高频的操作。在以往使用React Class组件的时候，这种操作我们已经很熟悉了，即在Class组件的componentDidMount中通过ajax来获取数据并setState，触发组件更新。
随着Hook的到来，我们可以在一些场景中使用Hook的写法来替代Class的写法。但是Hook中没有setState、componentDidMount等函数，又如何做到从服务器端异步获取数据并渲染呢？本文将会介绍如何使用React的新特性Hook来编写组件并获取数据渲染。
先来看一个数据渲染的简单demo
import Reac
				React Hook是什么？
React官网是这么介绍的： Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
完全可选的 你无需重写任何已有代码就可以在一些组件中尝试 Hook。但是如果你不想，你不必现在就去学习或使用 Hook。
100% 向后兼容的 Hook 不包含任何破坏性改动。
现在可用 H...
import React from 'react'
import { useState } from 'react'
export default function App4() {
    // Hook 只能用在组件函数中的最顶层
    const [num1, setNum1] = useState(1);
    const [num2, setNum2] = useState(1);
import React, { Component } from "react";
export default class ClassComponent extends React.Component {
 constructor(props) {
 super(props);
componentDidUpdate	（更新时）
componentWillUnmount	（卸载时）
Hook 是一些可以让你在函数组件里"钩入" React state 及生命周期等特性的函数,Hook 不能在class 组件中使用，常用Hook: useState()、useEffect()、useRef()、useContext()……
Hook 的特点
– 在组件之间复用状态逻辑，无需修改组
				react中的函数式组件是一个纯函数，它没有自己的状态，也没有自己的生命周期的，因而需要借助hooks去实现更多的功能。
1.模拟componentWillMount、componentWillUnmount
function Demo() {
    useEffect(() => {
        // 相当于 componentDidMount
        console.log("我模拟了componentDidMount")
        return () => 
常用的生命周期的方法有：
1.constructor()
constructor()中完成了React数据的初始化，它接受两个参数：props和context，当想在函数内部使用这两个参数时，需使用super()传入这两个参数。
注意：只要使用了constructor()就必须写super(),否则会导致this指向错误。
    constructor(props) {
        super(props)
        this.state = {
				引入：什么是Hook
Hook 是什么？ Hook 是一个特殊的函数，它可以让你**“钩入” React 的特性**。它们名字通常都以 use 开始。
例如，useEffect 是允许你在 React 函数组件中添加 "effect" 的 Hook。
基本使用
useEffect接受两个参数，第一个参数为"effect"函数，第二个参数为依赖项数组，是可选参数。
"effect"函数：在"effect"中，进行一些副作用的操作。如果副作用的操作需要清除，"effect"可以返回一个函数。每次要执行更新的"e
export default function Home() {
  let [date, setDate] = useState({ count: 0 });
  useEffect(() => console.log("useEffect DidMount"), []);
  return (
react的特点: react采用组件化模式，声明式编码，提高开发效率以及组件复用率。
React Native 中可以使用React语法进行移动端开发 ，可以用js代替Andriod开发移动端app。
2.react起步
react.development.js react核心库
react-dom.development.js react扩展库，帮助操作dom元素 这两个文件引入顺序不可随意更换，后者依赖前者
babel.min.js ES6转ES5 并且帮助react中的jsx转