React18 Hooks,React Hooks和Class对比(计数器案例)，useState()原理,在自定义hooks中使用react提供的hooks

学习React Hooks

• 创建新项目create-react-app 011learn-react-hooks

React Hooks和Class对比

不使用hooks函数式组件存在的最大的缺陷：

• 1.组件不会被重新渲染：修改msg之后，组件不知道自己重新渲染
• 2.如果页面重新渲染：函数会被重新执行，第二次重新执行时，会重新给msg赋初始值
• 3.没有类似生命周期的回调函数

为什么使用hooks?

• 类组件优势
• 类组件存在的问题

• hooks小结

计数器案例对比hooks和class

import { memo, useState } from "react";
function Count(props) {
  const [count, setCount] = useState(0);
  function add() {
    setCount(count + 1);
  }
  function sub() {
    setCount(count - 1);
  }
  return (
    <div>
      Count Page-count:{count}
      <div>
        {/* 将函数名作为onClick的值进行传递，而不是直接调用函数。这样点击按钮时，对应的函数才会被正确地执行。 */}
        {/* <button onClick={add()}>+1</button>
        <button onClick={sub()}>-1</button> */}
        {/* 修改后的代码 */}
        <button onClick={add}>+1</button>
        <button onClick={sub}>-1</button>
      </div>
    </div>
  );
}
export default memo(Count);

import React, { PureComponent } from "react";
export class CountClass extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }
  add() {
    this.setState({
      count: this.state.count + 1,
    });
  }
  sub() {
    this.setState({
      count: this.state.count - 1,
    });
  }
  render() {
    const { count } = this.state;
    return (
      <div>
        <h2>CountClass Page - count:{count}</h2>
        <div>
          <button onClick={(e) => this.add()}>+1</button>
          <button onClick={(e) => this.sub()}>-1</button>
        </div>
      </div>
    );
  }
}
export default CountClass;

useState()解析

在自定义hooks中使用react提供的其他hooks：必须使用use开头

useState()原理

import React, { memo, useState } from "react";
const ChangeText = memo(() => {
  const [msg, setMsg] = useState("hello,mm");
  function changeTextHandle() {
    setMsg("hello,ww");
  }
  return (
    <div>
      <h2>ChangeText Page msg:{msg}</h2>
      <button onClick={changeTextHandle}>changeText</button>
    </div>
  );
});
export default ChangeText;