React 函数组件

函数组件

import React, { useState } from 'react';
import './App.css';

const App = props => {
  const [n,setN] = React.useState(0)
  const onClick = ()=>{
    setN(n+1)
  }
  return (
    <div>
      {n}
      <button onClick={onClick}>+1</button>
    </div>
  );
}

export default App;

函数组件模拟生命周期

使用useEffect

• 模拟componentDidMount

useEffect(() => {
    console.log("use effect");
  }, []); //[]只在第一次渲染的时候调用

• 模拟componentDidUpdate

useEffect(() => {
    console.log("n或者m 变了");
  }, [n,m]);

• 模拟componentWillUnmount

const App = (props) => {
  const [childVisible, setChildVisible] = useState(true);
  const hide = () => {
    setChildVisible(false);
  };
  const show = () => {
    setChildVisible(true);
  };
  return (
    <div>
      {childVisible ? (
        <button onClick={hide}>hide</button>
      ) : (
        <button onClick={show}>show</button>
      )}
      {childVisible ? <Child /> : null}
    </div>
  );
};

const Child = (props) => {
  useEffect(()=>{
    return ()=> {
      console.log('Child销毁了');
    }
  })
  return <div>Child</div>;
};

• constructor 函数组件执行的时候，就相当于constructor

• shouldComponentUpdate React.memo 和 useMemo

• render

自定义Hook之useUpdate

import { useEffect, useState } from "react";
const useUpdate = (fn, array) => {
  // const [nUpdateCount, setNUpdateCount] = useState(0);
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount((x) => x + 1);
  }, array);
  useEffect(() => {
    if (count > 1) {
      console.log("count", count);
      fn();
    }
  }, [count]);
};
export default useUpdate;

import React, { useEffect, useState } from "react";
import "./App.css";
import useUpdate from "./useUpdate";


const App = (props) => {
  const [n, setN] = useState(0);
  const onClick = () => {
    setN(n + 1);
  };

  
  useUpdate(() => {
    console.log("变了");
  }, [n]);

  return (
    <div>
      {n}
      <button onClick={onClick}>+1</button>
    </div>
  );
};

export default App;