Stateful vs. Stateless Functional Components in React

React: The core components of building interactive user interfaces

React is a popular JavaScript front-end library for building interactive user interfaces. Its learning curve is relatively flat, which is one of the reasons it has attracted much attention recently.

Although there are many important concepts to learn, components are undoubtedly the core of React. A deep understanding of components will make your React development journey easier.

Prerequisites

This tutorial is for beginners who are just beginning to learn React and need to have a better understanding of components. We will start with component foundations and then gradually dive into more challenging concepts such as component patterns and when to use them. We will cover different component categories, such as class components and function components, stateful and stateless components, and container components and presentation components.

Let's get started!

What are components?

Components are self-contained, independent miniature entities that describe part of the UI. The application's UI can be split into smaller components, each with its own code, structure, and API.

For example, when you look at Facebook’s web applications, it has thousands of interconnected features. Interestingly, Facebook contains 30,000 components and the number is growing. Component architecture allows you to think about each component independently. Each component can update everything within its scope without worrying about how it affects other components.

If we take Facebook's UI as an example, the search bar will be a suitable component candidate. Facebook's news feed can form another component (or a component that contains many subcomponents). All methods and AJAX calls related to the search bar will be located within this component.

Components are also reusable. This is easy to implement if you need to use the same component in multiple places. With JSX syntax, you can declare components wherever you need to display them.

<code><div>
<br>    Current count: {count}<br><hr>
<br>    {/* Example of component reusability*/}<br>            updateCount = {setCount(count 1)}/><br>            updateCount = {setCount(count-1)}/><br>
</div>
<br></code>

Props and State

Components require data to work. You can combine components and data in two different ways: as props or state . props and state determine how components are rendered and behave. Let's start with props.

Understand props

If the component is a normal JavaScript function, then props is the function input. According to this analogy, the component takes the input (we call it props), processes it, and then renders some JSX code.

While the data in props is accessible to components, React's philosophy is that props should be immutable and top-down. This means that the parent component can pass any data it wants to the child component as props, but the child component cannot modify its props. So if you try to edit props like below, you will get a "Cannot assign value to read-only" error. useState() hook is used as follows:

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

You can then use setCount() to get the current count.

Class Components

Class components may be more complex than functional components, but some people prefer this style.

You can create a class component by extending super() to pass content inherited from the parent class.

Note that the constructor is optional when defining a component. In the above case, the component has no state and the constructor does not seem to perform any useful operations. props.

The best practice is to recommend using constructors for all class components.

Also, if you use a constructor, you need to call super() , otherwise you will get an error "Missing super() call in constructor".

My last point is about using count and count variables if you use hooks or this.setState() to update the state. useState() hook returns a second function that allows you to update the state with the new value.

<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>

Then setCount() takes an object as input, we increment the previous value of count by 1, which works as expected. However, there is a problem. When there are multiple setState() to increment the count by 100, then update it to 1, and then delete the previously added 100. If setState() is asynchronous, and multiple prevState are references to previous states and are guaranteed to be up-to-date. React.memo is used for hooks. All of this may sound a little confusing when you're new to React. If the same result is guaranteed to be returned when the same props and state are given, the component is called a pure component. Stateless components are a great example of pure components, because given an input you know what you are going to render.

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

If your component is pure, you can optimize it with PureComponent . These methods change the update behavior of React components. By default, React components are always updated when state or props change. However, if you use memo , React performs shallow comparisons on props and state, which means you compare the direct content of the object instead of recursively comparing all key/value pairs of the object. So only object references are compared, which may not work as expected if the state or props are modified.

<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 is used to optimize performance, and unless you have some kind of performance issue, there is no reason to consider using them.

The final thought

Function components and hooks are usually much simpler than their class component counterparts, so unless you have special preferences, function components are the best choice.

In this tutorial, you have a high-level overview of component-based architectures and different component patterns in React.

This article has been updated and includes Jacob Jackson's contribution. Jacob is a web developer, tech writer, freelancer and open source contributor.

The above is the detailed content of Stateful vs. Stateless Functional Components in React. For more information, please follow other related articles on the PHP Chinese website!