1、创建函数组件方式
相比类组件其实更提倡使用函数组件，因为它在很多操作上都是很便捷的，比如说没有 this。创建函数组件的方式如下：
const Hello = (props) => { <!--箭头函数的形式--> return <div>{ props. message}</div> } const Hello = props => <div>{ props. message}</div> <!--缩写--> function Hello(props){ <!--普通函数的形式--> return<div>{ props. message}</div> }
2、函数组件代替 class 组件
为什么要用函数组件代替 class 组件？别问，简单！相比类组件来说，函数组件确实要简单太多， 不妨看一个 +1 的例子：
class App extends React.Component { const App = props => { constructor() { const [n, setN] = React.useState(0); super(); const addN = () => { this.state = { setN(n+1); n: 0 } }; return ( } <div>{n} addN = () => { <button onClick={addN}>+1</button></div> this.setState({ n: this.state.n + 1 }); ) }; } render() { return ( <div className="App"> {this.state.n} <button onClick={this.addN}>+1</button> </div> ); //这是公共的渲染部分 } const rootElement = document.getElementById("root"); } ReactDOM.render(<App />, rootElement);
通过上面的例子你可以看出，同样是实现 +1 的操作，类组件要比函数组件复杂的多，类组件不仅涉及到 extends、setState 等 API，还会涉及到 this 的使用，而且代码量还很多。反观函数组件就要清爽的多，所以在开发中推荐使用函数组件。
3、函数组件的 useState()
上述通过示例来说明函数组件的优越性，并推荐开发人员使用函数组件，但是如果用函数组件代替 class 组件的话，函数组件还是会面临两个问题：函数组件没有 state、函数组件没有生命周期。
为应对函数组件没有 state：React 在 v16.8.0 推出 Hooks API，其中一个 API 叫做 useState()
const App=props=>{ const [n, setN] = React.useState(0); //useState()返回一个数组，第一个是读，第二个是写 const addN = () => { setN(n+1); } return ( <div>{n} <button onclick={ addN }>+1</button></div> } }
4、函数组件的 useEffect()
上述通过示例来说明函数组件的优越性，并推荐开发人员使用函数组件，但是如果用函数组件代替 class 组件的话，函数组件还是会面临两个问题：函数组件没有 state、函数组件没有生命周期。
为应对函数组件没有生命周期：React 在 v16.8.0 推出 Hooks API，其中的一个 API 叫做 useEffect()
const App=props=>{ const [n, setN] = React.useState(0); //useState()返回一个数组，第一个是读，第二个是写 const addN = () => { //声明state和函数就相当于类组件的constructor生命周期 setN(n+1); } useEffect(() => { //useEffect()第一个参数是一个回调，第二个参数指明要模拟什么生命周期 console.log(' use effect') }, []) //如果第二个参数为[ ] 空数组，则表示 conponentDidMount() useEffect(() => { console.log('n 被修改了') }, [n]) //如果第二个参数为一个变量，则表示改变量变了会执行，它模拟conponentDidUpdate() //如果要看多个变量是否变化，可以写一个数组，如 [n, m] //如果不传递第二个参数，则表示改组件中任意的一个state变化都会执行 useEffect(() => { console.log(' use effect') return ()=>{ console.log('组件要 G'); //useEffect()在第一个回调中的返回函数会在组件将死时调用 } //这是用来模拟类组件的 componentWillUnMount() }) return ( //相当于类组件的render生命周期 <div>{n} <button onclick={ addN }>+1</button></div> } }
总结：函数组件通过使用 useEffect() 可以模拟类组件的生命周期，其中 useEffect() 方法接收两个参数，第一个参数是函数，表示当组件第一次渲染或组件被修改的时候执行，区别是否为第一次渲染需要用到第二个参数。
5、函数组件模拟生命周期
模拟 componentDidMount：useEffect((）=> {console.log（'第一次渲染）}，[ ]）。第二个参数为空数组
模拟 componentDidUpdate：
useEffect((）=> {console.log（'任意属性变更）}。第二个参数为空。
useEffect((）=> {console.log（'n变了‘）}，[n]）。第二个参数为要组件上的变量。
模拟 componentWillUnmount：useEffect() 的第一个参数的返回函数，会在组件要销毁时调用。
模拟 constructor：函数组件在使用 useState() 声明变量，声明组件中的函数，就相当于类组件的 constructor。
模拟 shouldComponentUpdate：使用 React.memo 和 useMemo 可以解决。
模拟 render：函数组件的 return 就相当于模拟类组件的 render。
