React Hooks：React 函数式组件和类组件
Author：zhoulujun Date：
函数式组件
函数组件，顾名思义，就是通过函数编写的形式去实现一个React组件，是React中定义组件最简单的方式
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}在hooks出来之前，函数组件就是无状态组件，不能保管组件的状态，不像类组件中调用setState
如果想要管理state状态，可以使用useState，如下：
const FunctionalComponent = (props) => {
const [count, setCount] = React.useState(0);
return (
<div>
<p>count: {count}</p>
<button onClick={() => setCount(count + 1)}>Click {props.a}</button>
</div>
);
};类式组件和函数式组件的区别
一、语法不同、设计思想不同
函数式组件是函数式编程思想，而类组件是面向对象编程思想。面向对象编程将属性和方法封装起来，屏蔽很多细节，不利于测试。
二、生命周期、状态变量
类式组件：使用state对象定义状态变量，有诸如componmentDidMount、shouldComponentUpdate等生命周期钩子函数；
函数式组件：没有this,使用一系列的内置hooks实现对应的功能，比如使用useState创建状态变量，使用useEffect实现类似于componmentDidMount、shouldComponentUpdate等生命周期钩子函数的功能。
三、复用性
类式组件：使用hoc（高阶组件）、render propss实现组件的逻辑复用、拓展组件的功能。
函数式组件：使用自定义hooks实现组件的逻辑复用。
为什么优先选择函数式组件
函数组件性能比类组件好，但是在现代浏览器中，闭包和类的原始性能只有在极端场景下才会有明显的差别。
性能主要取决于代码的作用，而不是选择函数式还是类组件。尽管优化策略有差别，但性能差异可以忽略不计。
参考官网：(zh-hans.reactjs.org/docs/hooks-…)
参考作者github：(github.com/ryardley/ho…)
函数式组件经常被忽略的点：函数式组件捕获了渲染所用的值。（Function components capture the rendered values.）
函数式组件
function ProfilePage(props) {
const showMessage = () => alert('你好 ' + props.user);
const handleClick = () => setTimeout(showMessage, 3000);
return <button onClick={handleClick}>Follow</button>
}等价于类组件
class ProfilePage extends React.Component {
// 这个类方法从 this.props.user 中读取数据。能在渲染方法以及生命周期方法中得到最新的实例。
showMessage = () => alert('Followed ' + this.props.user);
//调用一个回调函数读取 this.props 的 timeout 会让 showMessage 回调并没有与任何一个特定的渲染"绑定"在一起，所以它"失去"了正确的 props。。
// handleClick = () => setTimeout(this.showMessage, 3000);
handleClick = () => { const {user} = this.props;
setTimeout(() => this.showMessage(user), 3000);
};
render() {
return <button onClick={this.handleClick}>Follow</button>;
}
}推荐阅读：React 函数式组件和类组件的区别，不是只有state和性能！ https://juejin.cn/post/6844904049146331150，实际我们切记以下两点：
在 React 中 Props 是 不可变(immutable)的，所以他们永远不会改变。
而 this 是而且永远是 可变(mutable)的。**
Hooks是比HOC和render props更优雅的逻辑复用方式，函数式组件的心智模型更加“声明式”。hooks（主要是useEffect）取代了生命周期的概念（减少API），让开发者的代码更加“声明化”：
旧的思维：“我在这个生命周期要检查props.A和state.B（props和state），如果改变的话就触发xxx副作用”。这种思维在后续修改逻辑的时候很容易漏掉检查项，造成bug。
新的思维：“我的组件有xxx这个副作用，这个副作用依赖的数据是props.A和state.B”。从过去的命令式转变成了声明式编程。
其实仔细想一想，人们过去使用生命周期不就是为了判断执行副作用的时机吗？现在hooks直接给你一个声明副作用的API，使得生命周期变成了一个“底层概念”，无需开发者考虑。开发者工作在更高的抽象层次上了。
类似的道理，除了声明副作用的API，react还提供了声明“密集计算”的API（useMemo），取代了过去“在生命周期做dirty检查，将计算结果缓存在state里”的做法。React内核帮你维护缓存，你只需要声明数据的计算逻辑以及数据的依赖。
这里，还是得通读：为什么 React 现在要推行函数式组件，用 class 不好吗？ - csr632的回答 - 知乎
OPP是将业务抽象成事物之间的联系和转变；FB则是把业务抽象成信息的映射和转换。
参考内容：
https://www.zhihu.com/question/343314784/answer/937174224
转载本站文章《React Hooks：React 函数式组件和类组件》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/jsBase/2021_1226_8734.html