react中的状态与无状态功能组件

React：构建交互式用户界面的核心组件

React是一个流行的JavaScript前端库，用于构建交互式用户界面。它学习曲线相对平缓，这也是它最近备受关注的原因之一。

虽然有很多重要的概念需要学习，但组件无疑是React的核心。深入理解组件将使您的React开发之旅更加轻松。

先决条件

本教程面向刚开始学习React并需要更好地了解组件的初学者。我们将从组件基础开始，然后逐步深入更具挑战性的概念，例如组件模式以及何时使用这些模式。我们将涵盖不同的组件分类，例如类组件与函数组件、有状态组件与无状态组件以及容器组件与展示组件。

让我们开始吧！

什么是组件？

组件是自包含的、独立的微型实体，用于描述UI的一部分。应用程序的UI可以拆分成更小的组件，每个组件都有其自己的代码、结构和API。

例如，当您查看Facebook的Web应用程序时，它拥有数千个相互连接的功能部件。有趣的是：Facebook包含30,000个组件，并且数量还在不断增长。组件架构允许您独立地思考每个部件。每个组件都可以更新其作用域内的所有内容，而无需担心它如何影响其他组件。

如果我们以Facebook的UI为例，搜索栏将是一个合适的组件候选者。Facebook的新闻Feed可以构成另一个组件（或包含许多子组件的组件）。与搜索栏相关的所有方法和AJAX调用都将位于该组件内。

组件也是可重用的。如果您需要在多个地方使用相同的组件，这很容易实现。借助JSX语法，您可以在任何需要显示组件的地方声明它们。

<code><div>
<br>    当前计数：{count}<br>    <hr>
<br>    {/* 组件可重用性示例 */}<br>            updateCount = {setCount(count 1)}/><br>            updateCount = {setCount(count-1)}/><br>
</div>
<br></code>

Props和State

组件需要数据才能工作。您可以通过两种不同的方式组合组件和数据：作为props或state。props和state决定组件的渲染方式及其行为。让我们从props开始。

理解props

如果组件是普通的JavaScript函数，那么props就是函数输入。根据这个类比，组件接受输入（我们称之为props），处理它，然后渲染一些JSX代码。

虽然props中的数据可供组件访问，但React的理念是props应该是不可变的且自上而下的。这意味着父组件可以将任何它想要的数据作为props传递给子组件，但子组件不能修改其props。因此，如果您尝试像下面这样编辑props，您将收到“无法赋值给只读”错误。useState()钩子使用方法如下：

<code>const [count,setCount] = useState(0);<br></code>

然后，您可以使用setCount()获取当前计数。

类组件

类组件可能比函数组件更复杂，但有些人更喜欢这种风格。

您可以通过扩展super()来创建一个类组件，以传递从父类继承的内容。

请注意，在定义组件时，构造函数是可选的。在上述情况下，组件没有状态，并且构造函数似乎没有执行任何有用的操作。props。

最佳实践是建议为所有类组件使用构造函数。

此外，如果您使用构造函数，则需要调用super()，否则会报错“Missing super() call in constructor”。

我的最后一点是关于如果您使用钩子或this.setState()来更新状态，则使用count和count变量。useState()钩子返回第二个函数，允许您使用新值更新状态。

<code>// 这有效<br><br>// 钩子<br>const [count,setCount] = useState(0);<br>setCount(count value);<br><br>// 类组件<br>handleCount(value) {<br>    this.setState({count: this.state.count  value});<br>}<br></code>

然后setCount()接受一个对象作为输入，我们将count的先前值增加1，这按预期工作。但是，有一个问题。当有多个setState()将计数增加100，然后将其更新为1，然后删除之前添加的100时。如果setState()是异步的，并且多个prevState是先前状态的引用，并且保证是最新的。React.memo用于钩子。当您刚接触React时，所有这些听起来可能有点令人困惑。如果保证给定相同的props和state时返回相同的结果，则称组件为纯组件。无状态组件是纯组件的一个很好的例子，因为给定一个输入，您就知道将要渲染什么。

<code>const HelloWorld = ({name}) => (<br> <div>{`Hi ${name}`}</div>
<br>);<br></code>

如果您的组件是纯组件，则可以使用PureComponent对其进行优化。这些方法改变了React组件的更新行为。默认情况下，React组件在状态或props更改时始终更新。但是，如果您使用memo，React会对props和state执行浅比较，这意味着您比较对象的直接内容，而不是递归地比较对象的所有键/值对。因此，只比较对象引用，如果状态或props被修改，这可能无法按预期工作。

<code>// 类组件<br>class MyComponent extends React.PureComponent  { // 使用它代替 React.Component<br>    // ...<br>}<br><br>// 钩子<br>const MyComponent = React.memo(function MyComponent(props) { // 将组件函数包装在 React.memo 中<br>    // ...<br>}); <br></code>

React.memo用于优化性能，除非您遇到某种性能问题，否则没有理由考虑使用它们。

最后的想法

函数组件和钩子通常比它们的类组件对应物简单得多，因此，除非您有特殊偏好，否则函数组件是最佳选择。

在本教程中，您对基于组件的架构和React中的不同组件模式有了一个高级概述。

这篇文章已更新，并包含了Jacob Jackson的贡献。Jacob是一位Web开发人员、技术作家、自由职业者和开源贡献者。

以上是react中的状态与无状态功能组件的详细内容。更多信息请关注PHP中文网其他相关文章！