[英]React functional components vs classical components
I'm trying to understand when to use React functional components vs. classes and reading from the docs they don't really go into detail.我试图了解何时使用 React 功能组件与类,并从文档中阅读它们并没有真正深入。 Can you give me some primary examples of the below of when you would want a specific feature of a class to make a component?
您能否给我一些下面的主要示例,说明您何时希望类的特定功能来制作组件?
A functional component is less powerful but is simpler, and acts like a class component with just a single render() method.
函数式组件功能不那么强大,但更简单,并且就像一个只有一个 render() 方法的类组件。 Unless you need features available only in a class, we encourage you to use functional components instead.
除非您需要仅在类中可用的功能,否则我们鼓励您改用功能组件。
You only need a class
component when you:当您执行以下操作时,您只需要一个
class
组件:
componentDidCatch
componentDidCatch
创建错误边界You only need a class
component when you:当您执行以下操作时,您只需要一个
class
组件:
componentDidMount
etc.componentDidMount
等。This answer is deprecated.此答案已弃用。
With react hooks, a functional component can also have a state.使用反应钩子,功能组件也可以具有状态。
If we use Redux, there will be two kinds of Components:如果我们使用 Redux,将会有两种 Components:
Redux's creator Dan Abramov has written an article Presentational and Container Components : Redux 的创建者 Dan Abramov 写了一篇文章Presentational and Container Components :
Presentational Components are written as functional components unless they need state, lifecycle hooks, or performance optimizations.
除非需要状态、生命周期挂钩或性能优化,否则演示组件被编写为功能组件。
Even though we don't use Redux.即使我们不使用 Redux。 We can also separate the components as Presentational Components and Container Components.
我们还可以将组件分离为展示组件和容器组件。
Cory House's article React Stateless Functional Components: Nine Wins You Might Have Overlooked let me know the Functional Components' advantages, Functional Components are more: Cory House 的文章React Stateless 函数式组件:你可能忽略的九个胜利让我知道了函数式组件的优势,函数式组件更多:
Functional Components are stateless, which is its limit.功能组件是无状态的,这是它的限制。
But fortunately, most of the time, we don't need a state.但幸运的是,大多数时候,我们不需要状态。
Stateless functional components are useful for dumb/presentational components .
无状态功能组件对于哑/展示组件很有用。 Presentational components focus on the UI rather than behaviour, so it's important to avoid using state in presentational components.
展示组件专注于 UI 而不是行为,因此避免在展示组件中使用状态非常重要。 Instead, the state should be managed by higher-level “container” components, or via Flux/Redux/etc.
相反,状态应该由更高级别的“容器”组件或通过 Flux/Redux/etc 管理。 Stateless functional components don't support state or lifecycle methods.
无状态功能组件不支持状态或生命周期方法。 This is a good thing.
这是一件好事。 Why?
为什么? Because it protects from laziness.
因为它可以防止懒惰。
See, it's always tempting to add state to a presentational component when you're in a hurry.
看,当您赶时间时,总是很想将状态添加到演示组件。 It's a quick way to hack into a feature.
这是破解某个功能的快速方法。 Since stateless functional components don't support local states, you can't easily hack into some state in a moment of laziness.
由于无状态功能组件不支持本地状态,因此您不能在偷懒的时候轻易侵入某些状态。 Thus, stateless functional components programmatically enforce keeping the component pure.
因此,无状态功能组件以编程方式强制保持组件纯净。 You're forced to put state management where it belongs: in higher-level container components.
您被迫将状态管理放在它所属的位置:在更高级别的容器组件中。
Functional Component功能组件
Example :例子 :
const Foo =()=>
{
return <Text>Hi there!</Text>
}
Class Component类组件
Example :例子 :
class Foo extends Component {
render(){
return <Text>Hi There!</Text>
}
}
The major difference between class and functional components is,类和功能组件之间的主要区别是,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.