使用React Hooks代替类的6大理由 Reacthooks已经出来有一段时间了

React hooks 已经出来有一段时间了，但是许多 React 开发人员对它们的态度并不是很积极。我发现这背后主要有两个原因。第一个原因是许多 React 开发人员已经参与了一个大型项目，需要付出巨大的努力才能迁移整个代码库。另一个原因是大家对 React 类已经很熟悉了。有足够经验的话，继续使用类会感到更自在。
在本文中，我们将探讨考虑使用 React Hooks 的六个原因。
1. 扩展函数式组件时，不必将其重构为类组件经常会有这种情况，那就是一个 React 组件从一个函数式组件开始开发，一开始这个函数式组件只依赖 props ，后来演变为具有状态的类组件。从函数式组件更改为类组件需要一些重构工作，具体取决于组件的复杂程度。
使用 React Hooks 时，由于函数式组件具有进入状态的能力，因此重构工作会非常少。来看以下示例，这是一个哑组件，它会显示一个带有计数的标签。
export function ShowCount(props) {return (Count : {props.count});}ShowCount 函数式组件
假设我们需要通过点击鼠标来增加计数，并假设这只会影响这一个组件。第一步，我们需要将状态引入组件。我们看一下如何使用基于类的方法。
【使用React Hooks代替类的6大理由】export class ShowCount extends React.Component {constructor(props) {super(props);this.state = {count: 0};}componentDidMount() {this.setState({count: this.props.count})}render() {return (Count : {this.state.count});}}引入状态后的 ShowCount 组件
如果使用 hooks ，则相同的组件会是下面这样。
export function ShowCount(props) {const [count, setCount] = useState();useEffect(() => {setCount(props.count);}, [props.count]);return (Count : {count});}带 hooks 的 ShowCount 组件
2. 你不必再担心“this”了人类和机器都会因为类而困惑
上面这句话来自 React 文档。造成这种混乱的原因之一是 this 关键字。如果你熟悉 JavaScript ，就会知道 JavaScript 中的 this 与其他语言并不完全一样。但在 React Hooks 这边，你完全不必操心 this 了。这对初学者和经验丰富的开发人员来说都是有益的。
文章插图
分别使用 hooks 与类访问状态的对比
根据上面的示例，你可以看到访问状态时我们不再需要使用“this” 。这样大家就都不会感到困惑了。
3. 不再有方法绑定现在，对于前面提到的那个 ShowCount 组件，我们将引入一种方法，当用户单击标签时，该方法可以更新状态计数。
export class ShowCount extends React.Component {constructor(props) {super(props);this.state = {count: 0};this.handleClickEvent = this.handleClickEvent.bind(this);}componentDidMount() {this.setState({count: this.props.count});}handleClickEvent() {this.setState({count: this.state.count + 1});}render() {return (Count : {this.state.count});}}具有 Click 事件处理程序的 ShowCount 组件
我们引入了 handleClickEvent 方法。要使用它，首先我们必须将其绑定到该组件的 this 上。
this.handleClickEvent = this.handleClickEvent.bind(this);我们必须这样做，因为执行方法时的执行上下文是不一样的。对于初学者来说，这可能有点难以理解。
除了绑定所有方法之外，还有一些语法提案可以解决这个问题。例如，我们可以将这个函数重写为一个箭头函数。