React列表更新不渲染？受控组件这样用

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《React列表状态更新不触发渲染？受控组件解决方法》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

在React组件中，直接通过`document.querySelector`获取输入框值并更新状态，是导致UI不重新渲染的常见原因。本文将深入解析React的渲染机制，并重点介绍如何通过采用受控组件模式来正确管理表单输入。通过将输入值绑定到组件状态，并利用`onChange`事件实时更新，可以确保组件状态与UI视图的同步，从而实现预期的渲染行为和数据流管理。

理解React的渲染机制与状态管理

React的核心理念是声明式编程：你描述UI在给定状态下应该是什么样子，React负责更新DOM以匹配这个描述。当组件的state或props发生变化时，React会触发重新渲染。具体来说，当调用this.setState()时，React会：

1. 合并传入的状态对象到当前状态。
2. 标记组件为需要重新渲染。
3. 在下一次渲染周期中调用组件的render()方法，生成新的虚拟DOM树。
4. 将新的虚拟DOM树与旧的虚拟DOM树进行比较（称为“协调”或“Diffing”算法）。
5. 只更新实际DOM中需要改变的部分，以最小化性能开销。

在上述过程中，如果组件的UI元素（如输入框）的值是通过直接操作DOM（例如document.querySelector().value）而非通过React的状态来管理，那么即使this.setState()被调用并更新了其他状态（如消息列表），React也无法感知到输入框值的变化。这会导致一个常见问题：状态已更新，但与该输入框相关的UI部分并未按照预期重新渲染，因为React认为它的值没有通过组件状态发生改变。

受控组件：管理表单输入的标准实践

为了确保React能够完全掌控表单元素的值，并使其与组件状态保持同步，我们应该使用“受控组件”模式。一个受控组件是指其表单元素的值由React状态（state）驱动的组件。

其核心思想是：

• 表单元素的value属性绑定到组件的state。
• 表单元素的onChange事件处理器负责更新state中对应的值。

通过这种方式，React的状态始终是表单元素的“单一数据源”，确保了数据流的清晰和UI与状态的同步。

示例代码：从非受控到受控的转变

考虑一个聊天页面，其中包含一个输入框用于发送消息。最初的实现可能错误地通过document.querySelector获取输入值：

class ChatPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userMessages: [[0, 'First example message'], [1, 'Second msg']],
            userMessageNextId: 2,
        };
        this.sendMessage = this.sendMessage.bind(this);
    }

    render() {
        return (
            <div className="chat-page mb-5">
                {/* ... 其他消息显示部分 ... */}
                <div className="input-container">
                    <div className="input-group">
                        &lt;input type=&quot;text&quot; className=&quot;form-control&quot; id=&quot;message-text&quot; placeholder=&quot;Type something...&quot;/&gt;
                        <button className="btn btn-primary" onClick={this.sendMessage}>Send</button>
                    </div>
                </div>
            </div>
        )
    }

    sendMessage() {
        // 问题所在：直接操作DOM获取输入值
        const messageText = document.querySelector("#message-text").value;
        if (!messageText?.trim()) return;
        this.setState(state => {
            const newArray = [...state.userMessages, [state.userMessageNextId, messageText]];
            return {
                userMessages: newArray,
                userMessageNextId: state.userMessageNextId + 1
            }
        });
        // 即使setState触发了渲染，但输入框的值不是由state控制的，所以它不会被清空或更新
    }
}

要将上述输入框转换为受控组件，需要进行以下修改：

1. 在组件状态中添加一个字段来存储输入框的值。
2. 将输入框的value属性绑定到这个状态字段。
3. 为输入框添加onChange事件处理器，当输入值改变时，更新对应的状态字段。
4. sendMessage方法不再通过document.querySelector获取值，而是直接使用组件状态中的值，并在发送后清空该状态。

以下是修改后的代码：

import React, { Component } from 'react';

// 假设 MessageGroup 和 Message 组件已定义
// import MessageGroup from './MessageGroup';
// import Message from './Message';

class ChatPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userMessages: [[0, 'First example message'], [1, 'Second msg']],
            userMessageNextId: 2,
            messageText: '' // 1. 在状态中添加一个字段来存储输入框的值
        };
        this.sendMessage = this.sendMessage.bind(this);
        this.handleInputChange = this.handleInputChange.bind(this); // 绑定事件处理器
    }

    render() {
        console.log(this.state.userMessages); // 调试时可以看到userMessages的变化
        return (
            <div className="chat-page mb-5">
                <div className="messages-container">
                    <MessageGroup sentBy="Juan">
                        <Message>This is the first message</Message>
                        <Message>This is the second message</Message>
                    </MessageGroup>
                    <MessageGroup sentByUser>
                        {/* 渲染用户发送的消息列表 */}
                        {this.state.userMessages.map((val) => (
                            <Message key={val[0]}>{val[1]}</Message>
                        ))}
                    </MessageGroup>
                </div>
                <div className="input-container">
                    <div className="input-group">
                        &lt;input
                            type=&quot;text&quot;
                            className=&quot;form-control&quot;
                            id=&quot;message-text&quot;
                            placeholder=&quot;Type something...&quot;
                            value={this.state.messageText} // 2. 将输入框的value绑定到state
                            onChange={this.handleInputChange} // 3. 添加onChange事件处理器
                        /&gt;
                        <button className="btn btn-primary" onClick={this.sendMessage}>
                            Send
                        </button>
                    </div>
                </div>
            </div>
        );
    }

    sendMessage() {
        // 4. 不再使用document.querySelector，直接使用state中的messageText
        if (!this.state.messageText.trim()) return;

        this.setState((state) => {
            console.log('Setting state...');
            const newArray = [...state.userMessages, [state.userMessageNextId, state.messageText]];
            return {
                userMessages: newArray,
                userMessageNextId: state.userMessageNextId + 1,
                messageText: '' // 4. 发送消息后清空输入框
            };
        });
    }

    handleInputChange(event) {
        // 3. onChange事件处理器：更新state中的messageText
        this.setState({ messageText: event.target.value });
    }
}

export default ChatPage;

通过上述修改，每次用户在输入框中键入字符时，handleInputChange都会被调用，从而更新this.state.messageText。由于input元素的value属性绑定到this.state.messageText，React会检测到状态变化并重新渲染input，确保其显示的值始终与state保持一致。当点击发送按钮时，sendMessage方法使用this.state.messageText，并将其清空，这将再次触发渲染，从而清空输入框。

注意事项与最佳实践

1. 避免直接DOM操作： 在React应用中，应尽可能避免直接使用document.querySelector、document.getElementById等API来获取或修改DOM元素，因为这会绕过React的虚拟DOM机制，导致状态与UI不同步，并可能引发难以调试的问题。
2. 状态的不可变性： 在更新数组或对象类型的状态时，务必创建新的副本而不是直接修改现有状态。例如，[...state.userMessages, newMessage]创建了一个新数组，而不是修改state.userMessages的引用。这对于React的性能优化（如shouldComponentUpdate）和确保正确渲染至关重要。
3. 列表的key属性： 在渲染列表（如userMessages.map(...)）时，始终为每个列表项提供一个稳定且唯一的key属性。这有助于React高效地识别哪些项已更改、添加或删除，从而优化重新渲染的性能。
4. 理解数据流： React遵循单向数据流原则。组件的状态是其数据源，所有UI的更新都应通过状态变化来驱动。

总结

在React开发中，正确管理表单输入是构建健壮和可预测用户界面的关键。通过采纳受控组件模式，将表单元素的值与组件状态绑定，并使用onChange事件处理器来同步更新状态，我们能够确保UI始终反映底层数据，避免了因直接DOM操作而导致的渲染不同步问题。这种模式不仅简化了状态管理，也使得组件的行为更加可预测和易于调试。

今天关于《React列表更新不渲染？受控组件这样用》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！