1. Re-render the component when state changes
The React component runs the render() method every time the state changes.
class App extends {
componentDidMount() {
({});
}
render() {
('render() method')
return <h1>Hi!</h1>;
}
}In the example above, state is updated after component mount is completed.
You can also trigger re-rendering components in the event listener, such as in the click event.
class App extends {
state = {
mssg: ""
};
handleClick = () => {
({ mssg: "Hi there!" });
};
render() {
("render() method");
return (
<>
<button onClick={}>Say something</button>
<div>{}</div>
</>
);
}
}All the above outputs are as follows:
render() method
render() method
2. Re-render the component when props change
class Child extends {
render() {
('Child component: render()');
return ;
}
}
class App extends {
state = {
mssg: ""
};
handleClick = () => {
({ mssg: "Hi there!" });
};
render() {
return (
<>
<button onClick={}>Say something</button>
<Child message={} />
</>
);
}
}In the above example, the <Child /> component does not contain a state, but it receives a prop named message.
After clicking the button, the <Child /> component will be updated, causing render() to be executed again.
Child component: render() Child component: render()
3. Re-render with the help of key prop
The above-mentioned updates to state and props will not cause the component to be remounted/uninstalled, and will only call the render() method again. Sometimes for some logically complex components, we need to remount/uninstall operations in order to re-render the content.
class Child extends {
componentWillUnmount() {
("will unmount");
}
render() {
("Child component: render()");
return ;
}
}
class App extends {
state = {
messages: [
{ id: 1, title: "Hello from Beijing", content: "Welcome to Beijing" },
{ id: 2, title: "Hello from London", content: "Welcome to London" },
{ id: 3, title: "Hello from Tokyo", content: "Welcome to Tokyo" }
],
activeId: null
};
render() {
const { messages, activeId } = ;
return (
<>
<ul>
{((item) => (
<li
key={}
onClick={() => {
({ activeId: });
}}
>
{}
</li>
))}
</ul>
<Child
key={activeId}
message={
activeId
? ((item) => === activeId).content
: ""
}
/>
</>
);
}
}In the above example, when the user clicks on the title, we want to remount/uninstall the entire subcomponent. At this time, we can add a key attribute to the subcomponent, which achieves the purpose. You can see that after each click, the componentWillUnmount() method will be executed.
4. Force re-render
This method is not recommended, it is recommended to update props and state.
class App extends {
handleClick = () => {
// force a re-render
();
};
render() {
('App component: render()')
return (
<>
<button onClick={}>Say something</button>
</>
);
}
}This is the end of this article about 4 ways to force re-render in React. For more related React re-rendering content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!