目录
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。
