一文带你搞懂React的函数组件
作者：何遇er
函数组件与类组件有什么区别？如果你对 React Hooks 有基本了解，在这里请抛开 React Hooks 回答这个问题。你的答案是函数组件没有自己的 state，也没有与类组件类似的生命周期概念吗？在本小节不讨论 state 和生命周期，先看一个函数调用的示例，代码如下：
function getName(params: {name: string}) {
const count = 0
return params.name + '-' + count
}
getName({name: '何遇'})
getName({name: 'Bella'})getName 是一个纯函数，不产生任何副作用，当执行结束，它的执行上下文和活动对象会被销毁，前后两次调用互不影响。对于不使用任何 Hooks 的函数组件而言，它也是纯函数，那么函数组件前后两次渲染你还能得出与前后两次调用 getName 函数类似的结论吗？
要对比函数组件和类组件的区别，下面用类组件和函数组件实现相同的功能，即：在浏览器显示一个按钮，点击按钮调用 props 中的方法去更新父组件的 state，隔 1s 之后打印 props.count 的值。类组件的代码如下：
class ClassCom extends React.Component<Props, never> {
render(): React.ReactNode {
return (
<button onClick={this.onClick}>这是类组件：刷新浏览器打开开发者工具再点击</button>
)
}
onClick = () => {
this.props.updateCount()
// 隔1s之后打印this.props.count的值
setTimeout(() => {
console.log(this.props.count)
}, 1000);
}
}
函数组件的代码如下：
function FuncCom(props: Props) {
const onClick = () => {
props.updateCount()
// 隔1s之后打印props.count的值
setTimeout(() => {
console.log(props.count)
}, 1000);
}
return (
<button onClick={onClick}>这是函数组件：刷新浏览器打开开发者工具再点击</button>
)
}FuncCom 和 ClassCom 组件的父级相同，代码如下：
class FuncComVsClassCom extends React.Component<{},State> {
state: State = {count: 0}
render(): React.ReactNode {
return (
<>
<FuncCom
count={this.state.count}
updateCount={this.updateCount}
/>
<ClassCom
count={this.state.count}
updateCount={this.updateCount}
/>
</>
)
}
updateCount = () => {
this.setState((prevSate: State) => {
return {count: prevSate.count + 1}
})
}
}观察上述代码可以发现传递给 FuncCom 和 ClassCom 组件的 props 一样，但在浏览器界面上点击各自的按钮，开发者工具打印的结果不一样，FuncCom 组件打印的值为 0，ClassCom 组件打印的值为 1。
现在揭晓答案，点击 FuncCom 和 ClassCom 组件中的按钮都会使它们的父级重新渲染，从而导致 FuncCom 和 ClassCom 重新渲染。ClassCom 是类组件，它重新渲染不会创建新的组件实例，在 setTimeout 的回调函数中 this.props 拿到了最新的值。FuncCom 是函数组件，它重新渲染会创建新的执行环境和活动变量，所以在其中访问 props，不论何时拿到的都是调用 FuncCom 时传递给它的参数，该参数不可变。
FuncCom 和 ClassCom 组件打印出不同的值，原因在于 props 不可变但类组件实例是可变的，访问 this.props 将始终得到类组件最新的 props。将ClassCom 的 this.props 赋值给一个变量，在 setTimeout 的回调函数中，用该变量访问 count 属性能让两个组件打印出相同的值。
后续介绍React Hooks时将继续介绍函数组件只得到本次渲染时 props 和 state 的值。
到此这篇关于一文带你搞懂React的函数组件的文章就介绍到这了,更多相关React函数组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！