【CRR学习笔记】React之函数式组件function，类组件class在工作中，我常常见到类组件，即便是一个不需要做

###React

前言

在工作中，我常常见到类组件，即便是一个不需要做过多操作的小组件，为什么不用函数式组件呢？带着这个疑惑，我开始关注这两者的区别的优势。

函数式组件function

一个简单的function组件如下：

function SwitchCompany(props){
    return (
    <div>
    ……
    </div>
    );
}

函数式组件的特点是轻量。特点如下：

没有生命周期，但会被更新挂载，没有生命周期函数
没有this
没有state

若无内部状态，只是渲染数据，推荐使用function组件。

但是！react16.8为函数式组件新增了hooks,将React的状态和生命周期等特性引入函数式组件。

hooks内置函数（9种）

分别是:

useState
useEffect
useContext
useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayout

1, useState 它是一个方法，可以传入值作为state的默认值，返回一个数组，数组的第一项是对应的状态(默认值会赋予状态)，数组的第二项是更新状态的函数。官方推荐使用解构赋值的方式。

可以多次使用。

const [count, setCount] = useState(1);

const App = () => {
    const [count, setCount] = useState(1);
    //传入1作为state默认值，count是它对应的状态，setCount是改变它的函数
    
    return (
        <>
        <h1> count </h1>
        <button onClick={()=>setCount(count+1)}}> + </button>
        </>
    );
}

2，useEffect 在函数组件中执行副作用操作，并且是函数渲染DOM完成后执行副作用操作。 useEffect这个方法传入一个函数作为参数，在函数里面执行副作用代码，并且useEffec的第一个参数还支持返回值为一个函数，这个函数执行相当于组件更新和卸载。

类组件 class

类组件分为普通类组件（React.Component）以及纯类组件（React.PureComponent）。