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。

函数组件的 state 的写和 class 类组件的写是完全不同的，函数组件的 setState 不会自动合并之前的值。如下：

const A = ()=>{
      const [user,setUser] = React.useState({name: 'jack', age: 18});
      const onChangeName = ()=>{
            setUser({
                  //必须加上这一句拷贝之前的数据： ...user,
                  name: 'lisa'    //这样写是完全错误的，不会自动合并之前的 state
            })
      }
      return (
            <div className="App">
                  <h1>{user.name}</h1>
                  <h1>{user.age}</h1>
                  <button onClick={onChangeName}>change name</button>
            </div>
      )
}

而且，函数组件的 setState 在接受同一个 state 对象时，即使其对象里的属性变了，但对象地址没变，是不会更新视图的。

const A = ()=>{
      const [user,setUser] = React.useState({name: 'jack', age: 18});
      const onChangeName = ()=>{
            user.name = 'lisa',
            setUser(user)   //错误，React 发现接收的对象的地址是同一个，则会认为数据没有改变，不会更新视图
      }
      return (
            <div className="App">
                  <h1>{user.name}</h1>
                  <h1>{user.age}</h1>
                  <button onClick={onChangeName}>change name</button>
            </div>
      )
}

应该产生一个新的 state 对象传入：

const onChangeName = ()=>{
            setUser({
                  ...user,
                  name: 'lisa'
            })   
      }

函数中的 setState 注意事项：

1. 不可局部更新视图

2. 地址一定要变

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 返回的内容