深入理解React状态管理与受控组件：解决列表更新不渲染问题-js教程-PHP中文网

深入理解React状态管理与受控组件：解决列表更新不渲染问题

本文旨在探讨react组件中，当状态中的列表数据更新后，ui却未能正确渲染的常见问题。核心原因在于对表单元素采取了非受控方式的dom直接操作，绕过了react的状态管理机制。通过详细解析react的渲染原理，本文将重点介绍如何利用受控组件模式，将输入元素的值与组件状态绑定，从而确保状态变化能够及时准确地反映到用户界面。

React组件渲染机制概述

React组件的UI更新是基于其内部状态（state）或外部属性（props）的变化来驱动的。当一个组件的state或props发生改变时，React会触发重新渲染流程。这个流程通常包括以下几个步骤：

状态或属性更新： 通过this.setState()方法（类组件）或useState Hook（函数组件）更新状态，或父组件传递新的props。
虚拟DOM比对： React会根据新的状态或属性生成一个新的虚拟DOM树，并与上一次渲染生成的虚拟DOM树进行高效的比对（diffing算法）。
真实DOM更新： React计算出最小的DOM操作集，然后将这些操作批量应用到真实的浏览器DOM上，从而更新用户界面。

理解这一机制至关重要，它强调了所有UI相关的变化都应该通过React的状态管理系统进行，而不是直接操作DOM。

问题根源：非受控输入与DOM直接操作

在React应用中，一个常见的错误是尝试直接通过JavaScript的DOM API（如document.querySelector().value）来获取或设置表单元素（如<input>、<textarea>、<select>）的值。这种做法被称为“非受控组件”的一种表现形式，并且在某些情况下会导致React组件无法按预期重新渲染，即使setState被调用了。

考虑以下原始代码片段中的sendMessage方法：

sendMessage() {
    const messageText = document.querySelector("#message-text").value; // 直接获取DOM值
    if (!messageText?.trim()) return;
    this.setState(state => {
        console.log('Setting state...')
        const newArray = [...state.userMessages, [state.userMessageNextId, messageText]];
        return {
            userMessages: newArray,
            userMessageNextId: state.userMessageNextId + 1
        }
    })
}

登录后复制

尽管this.setState被调用，并且userMessages数组被正确地更新了（通过展开运算符...创建了新数组，遵循了不可变性原则），但UI中的input字段本身的值并非由React的状态管理。messageText变量获取的是当前时刻DOM中input的值，这个值并没有与React组件的state建立关联。

当用户在输入框中输入内容并点击发送时：

sendMessage被调用。
document.querySelector("#message-text").value获取到当前输入框中的文本。
setState被调用，userMessages状态被更新，理论上会触发组件重新渲染，显示新的消息。
然而，输入框本身的值并没有被清空，因为它不是由React状态控制的。用户可能期望发送后输入框清空，但实际上它仍然显示上次发送的内容，这导致了用户体验上的不一致，并且可能误导开发者认为UI没有更新。

真正的UI不更新问题，往往不是因为userMessages的更新本身，而是因为input元素的值没有被React状态所“拥有”和管理，导致其行为与组件的其他状态脱节。

解决方案：拥抱受控组件

在React中，处理表单元素的最佳实践是使用“受控组件”（Controlled Components）。受控组件意味着React组件的state是表单元素的“单一数据源”。这意味着表单元素的值总是由React的状态驱动，并且任何值的变化都通过setState来更新状态。

实现受控组件模式通常涉及以下步骤：

钉钉 AI 助理

钉钉AI助理汇集了钉钉AI产品能力，帮助企业迈入智能新时代。

查看详情

在组件状态中引入输入字段的值： 在组件的state中添加一个属性，用于存储表单元素当前的值。
将input元素的value属性绑定到组件状态： 将input元素的value属性设置为this.state中对应的状态值。
为input元素添加onChange事件处理器： 当input元素的值发生变化时，onChange事件会被触发。在这个处理器中，通过this.setState来更新组件状态中对应的输入值。

通过这种方式，input元素的值始终由React状态控制，任何UI上的变化都会反映在状态中，反之亦然。

实现步骤与代码示例

让我们将上述原则应用到ChatPage组件中：

首先，在constructor中初始化state时，添加一个messageText属性来存储输入框的内容，并绑定handleInputChange方法：

class ChatPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userMessages: [[0, 'First example message'], [1, 'Second msg']],
            userMessageNextId: 2,
            messageText: '' // 1. 添加messageText到状态中
        };
        this.sendMessage = this.sendMessage.bind(this);
        this.handleInputChange = this.handleInputChange.bind(this); // 绑定事件处理器
    }

    // ... render 方法
}

登录后复制

接下来，修改render方法中的<input>元素，使其成为受控组件：

    render() {
        // ...
        return (
            // ...
            <div className="input-container">
                <div className="input-group">
                    <input
                        type="text"
                        className="form-control"
                        id="message-text"
                        placeholder="Type something..."
                        value={this.state.messageText} // 2. 将input的值绑定到state
                        onChange={this.handleInputChange} // 3. 添加onChange事件处理器
                    />
                    <button className="btn btn-primary" onClick={this.sendMessage}>
                        Send
                    </button>
                </div>
            </div>
            // ...
        );
    }

登录后复制

最后，实现handleInputChange方法来更新messageText状态，并修改sendMessage方法，使其从this.state.messageText获取值并清空输入框：

    sendMessage() {
        if (!this.state.messageText.trim()) return; // 从state获取值
        this.setState((state) => {
            console.log('Setting state...');
            const newArray = [...state.userMessages, [state.userMessageNextId, state.messageText]];
            return {
                userMessages: newArray,
                userMessageNextId: state.userMessageNextId + 1,
                messageText: '' // 发送后清空输入框
            };
        });
    }

    handleInputChange(event) {
        this.setState({ messageText: event.target.value }); // 实时更新messageText状态
    }

登录后复制

通过上述修改，input元素现在完全由React的状态控制。当用户输入时，handleInputChange会更新messageText状态，导致input的值也随之更新（虽然看起来是用户直接输入，但实际上是通过状态中转的）。当点击发送时，sendMessage会使用this.state.messageText来构建新消息，并在更新userMessages的同时将messageText重置为空字符串，从而实现输入框的自动清空，确保了UI与状态的同步。

完整的修正代码示例

import React, { Component } from 'react';

// 假设 MessageGroup 和 Message 组件已定义
// const MessageGroup = ({ children, sentBy, sentByUser }) => <div className={`message-group ${sentByUser ? 'sent-by-user' : ''}`}>{children}</div>;
// const Message = ({ children }) => <div className="message">{children}</div>;

class ChatPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userMessages: [[0, 'First example message'], [1, 'Second msg']],
            userMessageNextId: 2,
            messageText: '' // 添加 messageText 到状态中
        };
        this.sendMessage = this.sendMessage.bind(this);
        this.handleInputChange = this.handleInputChange.bind(this); // 绑定事件处理器
    }

    render() {
        console.log('Current userMessages:', this.state.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">
                        <input
                            type="text"
                            className="form-control"
                            id="message-text"
                            placeholder="Type something..."
                            value={this.state.messageText} // 绑定 input 值到 state
                            onChange={this.handleInputChange} // 添加 onChange 事件处理器
                        />
                        <button className="btn btn-primary" onClick={this.sendMessage}>
                            Send
                        </button>
                    </div>
                </div>
            </div>
        );
    }

    sendMessage() {
        if (!this.state.messageText.trim()) return; // 从 state 获取值并检查
        this.setState((state) => {
            console.log('Setting state...');
            const newArray = [...state.userMessages, [state.userMessageNextId, state.messageText]];
            return {
                userMessages: newArray,
                userMessageNextId: state.userMessageNextId + 1,
                messageText: '' // 发送后清空输入框
            };
        });
    }

    handleInputChange(event) {
        this.setState({ messageText: event.target.value }); // 实时更新 messageText 状态
    }
}

export default ChatPage;

登录后复制

关键注意事项

状态的不可变性（Immutability）： 在更新数组或对象类型的状态时，务必创建新的数组或对象副本，而不是直接修改原始状态。例如，[...state.userMessages, newItem]是正确的做法，它创建了一个包含旧元素和新元素的新数组。直接使用state.userMessages.push(newItem)会修改原始数组，可能导致React无法检测到状态变化而跳过重新渲染。
函数式setState： 当新的状态依赖于旧的状态时（如userMessageNextId和userMessages的更新），建议使用函数式setState (this.setState(prevState => ({ ... })))。这可以避免在异步更新状态时可能出现的竞态条件，确保你总是基于最新的状态进行计算。
单一数据源： 受控组件的核心思想是让React状态成为表单元素的单一数据源。这意味着你不再需要直接操作DOM来获取或设置表单值，所有交互都通过React的状态和事件系统进行。
调试： 在开发过程中，使用console.log来观察this.state的变化是一个很好的调试方法，可以帮助你确认状态是否按预期更新。

总结

React的渲染机制是基于状态和属性的变化。当UI未按预期更新时，一个常见的原因是表单元素没有被正确地“受控”。通过将表单元素的value属性绑定到组件的state，并使用onChange事件处理器来实时更新该状态，我们可以确保React能够完全管理表单元素，从而实现可预测且一致的UI行为。采用受控组件模式是构建健壮、可维护React应用的关键实践之一，它使得状态管理更加清晰，也更容易调试和测试。

以上就是深入理解React状态管理与受控组件：解决列表更新不渲染问题的详细内容，更多请关注php中文网其它相关文章！