React(四)-函数组件

一、函数组件写法

function B(props) {
  return <h1>Hello, {props.name}</h1>;
}
export default B;

函数组件和类组件传入参数的方法一样，在标签上写上属性，最后属性会合成props对象，类组件由 constructor 接受参数，并由super传递参数，挂在实例上通过this使用。函数组件直接作为参数使用。

我们直接标签使用<B/>即可

在以前的版本函数组件没有state和hooks，我们使用useState和useEffect分别解决问题

二、useEffect实现hooks

模拟componentDidMount（初次渲染/mounted）

useEffect(()=>{console.log('第一次渲染')},[])

模拟componentDidUpdate

useEffect(()=>{console.log('任意属性变更')})

模拟某个数据的upadte

useEffect(()=>{ console.log('n变了')}, [n])

模拟componentWillUnmount

useEffect(() => {
  return () => {
    // 清除订阅
  };
});

• constructor 函数组件执行的时候，就相当于constructor 
• shouldComponentUpdate 后面的React.memo和useMemo可以解决 
• render 函数组件的返回值就是render的返回值 

三、自定义钩子

我们要实现一个hooks，第一次由undefined变成0时不执行函数，之后变化时执行函数

import React, { useState, useEffect } from "react";

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

  const useX = (n) => {
    const [nUppdateCount, setNUppdateCount] = useSta(0);
    useEffect(()=>{
      setNUppdateCount(nUppdateCount + 1)
    },[n])
    return {
      nUppdateCount
    }
  }
    const nUppdateCount = useX(n).nUppdateCount
    useEffect(()=>{
      if(nUppdateCount>1){
        //some code
      }
    },[nUppdateCount])
}

在创建一个state记录n变化次数即可，函数组件里的函数只能以use开头

function Welcome(props) {
  const [n, setN] = useState(0);
  const onClick = () => {
    setN(n + 1);
  };
  const useX = (n,fn) => {
    const [nUppdateCount, setNUppdateCount] = useSta(0);
    useEffect(()=>{
      setNUppdateCount(nUppdateCount + 1)
    },[n])
    useEffect(()=>{
      if(nUppdateCount>1){
        fn()
      }
    },[nUppdateCount])
  };
  useX(n,()=>{})
}

聚合代码

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

  const useUppdate = (fn,array) => {
    const [Count, setCount] = useSta(0);
    useEffect(()=>{
      setCount(Count + 1)
    },array)

    useEffect(()=>{
      if(Count>1){
        fn()
      }
    },[Count])

  };
  useUppdate(()=>{},[n])
}

模仿原生hook

  const useUppdate = (fn,array) => {
    const [Count, setCount] = useSta(0);
    useEffect(()=>{
      setCount(Count + 1)
    },array)
    useEffect(()=>{
      if(Count>1){
        fn()
      }
    },[Count,fn])
  };

完成hook