React.js学习随笔二:组件数据的重新渲染

PhantomBuIlet

于 2021-07-09 16:29:30 发布

阅读量1.6k

点赞数 3

分类专栏： react学习随笔文章标签： react js

本文链接：https://blog.youkuaiyun.com/m0_60014407/article/details/118608730

版权

在React.js的实习项目中，作者遇到一个聊天框组件的渲染问题：点击发送消息时，信息未实时显示，仅在再次修改状态时才更新。分析发现，原因是没有通过setState方法触发组件重绘。解决方案包括使用this.forceUpdate()，但通常不推荐，因为这可能导致不必要的强制更新。理解React组件的渲染机制对于优化性能至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

公司给实习生出了几道练习题，使用开发框架不限。

在用react做的时候遇到了几个问题，给大家分享下。

其中一道题是写一个简易的聊天框，实现可以发送消息以及将两者发送消息分开的功能。

下面是代码：

import "./test1.css"
import React from 'react'
class Test1 extends React.Component {
    state = {
        select: "A",
        content: "",
        userText: [
            {
                user: "A",
                text: "吃饭了吗？"
            },
            {
                user: "B",
                text: "没呢，你呢？"
            }
        ]
    }
    //处理选择菜单
    handleSelectorChange = (e) => {
        this.setState({
            select: e.target.value
        })
    }
    //处理输入框
    handleInputChange = (e) => {
        this.setState({
            content: e.target.value
        })
    }
    //发送
    sendMessage = () => {
        //将state中两个值封装到对象里
        var mc

最低0.47元/天解锁文章