React 的函数组件

写在前面

React 的函数组件是 React 组件的另一种定义方式，两种方式都可以用于定义组件，但是相比于类组件，函数组件要更简单好用些。

组件名一般要大写，是为了在组件使用时与一般的 html 标签区分开

1. 创建方式

函数组件的创建方式就是定义一个函数，这个函数 return React组件。因此，返回一个 React 元素的函数就是组件。在 ES6 语法中，函数有两种定义方式，普通函数和箭头函数，因此，函数组件的方式也是两种。

const Hello = () => {
      return <div>Hello Word</div>
}

function Hello(){
      return <div>Hello Word</div>
}

2. 外部数据 props

函数接收外部数据的方式就是在函数的参数里拿到，如下：

const Hello = (props) => {
      return <div>{props.msg}</div>
}

3. 内部数据 state

函数组件没有 state，React v16.8.0 推出了 Hooks API，提供了 React.useState API解决了此问题。

函数组件的 state 数据的设置和获取是提供了一个接口 React.useState(初始值)，用于设置 state 的初始值，对 state 进行初始化。函数里面的参数为初始值，函数返回一个数组，数组的第一个是读数据方式，第二个是写数据方式。读数据变量命名为 xx 时，写数据方式一般命名为 setXX。

const Welcom = ()=>{
  const [n,setN] = React.useState(0);//析构赋值
  //等价于
  /*
  const state = React.useState(0);
  const n = state[0];
  const setN = state[1];
  */
  return (
    <div className="wel">
    n: {n}
		<button onClick={()=>setN(n+1)}>+1</button>
    </div>
  )
}

或者是先引入 useState，后面就不用再加 React. 了

import React, { useState } from ‘react‘;
const Welcom = ()=>{
   const [n,setN] = useState(0);
}

同样的，setN 也是一个异步函数，不会立马执行。和 setState 不同的是，setState 是等一会后会改变 state ，而 setN 是永远不会改变 n，而是产生新的 n。

4. 函数组件模拟生命周期

函数组件同样地没有生命周期，但是 React Hooks API 提供了 React.useEffect 来解决此问题。

React.useEffect(fn, ??) 第一个参数是在特定时机到的时候执行的回调函数，第二个参数是指明什么时机。

4.1 模拟 componentDidMount 第一次渲染

在第二个参数为 [] 时只会在第一次渲染时执行

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

4.2 模拟 componentDidUpdate （不完全模拟）

在第二个参数的数组里加上要监听变化的数据就行，若不加数组，不传第二个参数，则会在 state 的任意一个属性改变时都会触发该函数回调

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

useEffect(()=>{
      console.log("任意属性变了");
})

但是这样的模拟并不完全等同，因为该函数回调会在一开始在数据由未定义　undefined 到被赋值后会执行该回调函数。而 componentDidUpdate 不会再第一次渲染时执行。

因此可以 自定义 Hook 进行计数，正确模拟 componentDidUpdate 钩子，自定义 useUpdate.js 如下：

const useUpdate = (fn, dep)=>{
      const [count,setCount] = useState(0)
      useEffect(()=>{
            setCount(x => x + 1);
      },[dep])
      useEffect(()=>{
            if(count > 1){
                  fn()
            }
      },[count,fn])
}

4.3 模拟 componentWillUnmount

模拟销毁前执行时期，是用函数里返回函数的方式。

useEffect(()=>{
      console.log("任意属性变了");
      return ()=>{
            console.log("该组件要销毁了")
      }
})

4.4 其他组件的模拟

constructor 钩子的模拟就是在函数组件中，return 语句前的所有语句，这些语句都是在初始化函数组件的数据。

render 钩子就是函数组件中 return 返回的内容

React 的函数组件

原文：https://www.cnblogs.com/lovevin/p/13231718.html