在花了一些时间学习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在重新渲染时要运行的功能。
componentDidUpdate
useEffect(fn)
fn
componentDidMount可以使用复制方法useEffect(fn, []),其中方法fn是在重新渲染时运行的函数,并且[]是(且仅当自上次渲染以来至少一个值已更改的情况)组件将针对其进行渲染的对象数组。由于没有useEffect(),因此在第一次安装时运行一次。
componentDidMount
useEffect(fn, [])
[]
useEffect()
state可以复制为useState(),其返回值可以解构为状态的引用和可以设置状态的函数(即const [state, setState] = useState(initState))。一个例子可以更清楚地解释这一点:
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
关于何时在功能组件上使用类的建议,Facebook正式建议尽可能使用功能组件。顺便说一句,我听到很多人讨论出于性能原因不使用功能组件,特别是
“事件处理功能在功能组件中按渲染重新定义”
虽然正确,但请考虑您的组件是否真的以值得关注的速度或体积进行渲染。
如果是这样,则可以防止使用useCallback和useMemo挂钩重新定义功能。但是,请记住,这可能会使您的代码(微观上)的性能变差。
useCallback
useMemo
但老实说,我从未听说过重新定义功能是React应用程序的瓶颈。过早的优化是万恶之源-遇到问题时请担心