gpt4 book ai didi

javascript - 何时使用基于 ES6 类的 React 组件与功能性 ES6 React 组件?

转载 作者:IT老高 更新时间:2023-10-28 13:18:31 26 4
gpt4 key购买 nike

在花了一些时间学习 React 之后,我了解了创建组件的两种主要范式之间的区别。

我的问题是我应该什么时候使用哪一个,为什么?一个比另一个有什么好处/权衡?


ES6 类:

import React, { Component } from 'react';

export class MyComponent extends Component {
render() {
return (
<div></div>
);
}
}

功能:

const MyComponent = (props) => {
return (
<div></div>
);
}

只要该组件没有状态可操作,我就会认为是函数式的,但是是这样吗?

我猜如果我使用任何生命周期方法,最好使用基于类的组件。

最佳答案

新答案:在引入 React Hooks 之前,以下大部分内容都是正确的。

  • componentDidUpdate 可以用 useEffect(fn) 复制,其中 fn 是在重新渲染时运行的函数。

  • componentDidMount 方法可以用 useEffect(fn, []) 复制,其中 fn 是在重新渲染时运行的函数, 而 [] 是一个对象数组,当且仅当至少有一个对象自上次渲染后发生了更改时,组件才会重新渲染这些对象。由于没有,useEffect() 在第一次挂载时运行一次。

  • state 可以用 useState() 复制,其返回值可以解构为状态的引用和可以设置状态的函数(即,const [state, setState] = useState(initState))。一个例子可能会更清楚地解释这一点:

const Counter = () => {
const [count, setCount] = useState(0)

const increment = () => {
setCount(count + 1);
}

return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>+</button>
</div>
)
}

default export Counter

顺便说一句,我听到很多人讨论出于性能原因不使用功能组件,特别是

"Event handling functions are redefined per render in functional components"

虽然如此,但请考虑您的组件是否真的以值得关注的速度或体积渲染。

如果是,您可以使用 useCallbackuseMemo Hook 来防止重新定义函数。但是,请记住,这可能会使您的代码(微观)worse in performance .

但老实说,我从未听说过重新定义函数是 React 应用程序的瓶颈。过早的优化是万恶之源——当它成为问题时要担心这一点。


旧答案:你的想法是对的。如果您的组件除了接收一些 Prop 和渲染之外没有做更多的事情,请使用功能性。您可以将这些视为纯函数,因为在给定相同 Prop 的情况下,它们将始终呈现和表现相同。此外,它们不关心生命周期方法或拥有自己的内部状态。

因为它们是轻量级的,所以将这些简单的组件写成函数式组件是相当标准的。

如果您的组件需要更多功能,例如保持状态,请改用类。

更多信息:https://facebook.github.io/react/docs/reusable-components.html#es6-classes

关于javascript - 何时使用基于 ES6 类的 React 组件与功能性 ES6 React 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36097965/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com