react列表中,当key改变后发生的事情

Main.jsx

export default class Main extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            list: [
                {
                    key: 0,
                    value: 1
                },
                {
                    key: 1,
                    value: 2
                },
                {
                    key: 2,
                    value: 3
                }
            ]
        }
        this.setKey = ::this.setKey;
    }

    componentWillMount() {
        console.log(‘main will mount‘);
    }

    componentDidMount() {
        console.log(‘main did mount‘);
    }

    componentWillUpdate() {
        console.log(‘main will update‘);
    }

    componentDidUpdate() {
        console.log(‘main did update‘);
    }

    componentWillUnmount() {
        console.log(‘main will unmount‘);
    }

    setKey() {
        const { list } = this.state;

        this.setState({
            list: Array.from(list, item => {
                return Object.assign(item, {
                    key: item.key + 1
                });
            })
        });
    }

    render() {
        const { list } = this.state;
        return (
            <div>
                {list.map(item => <List key={item.key} value={item.value} />)}
                <button onClick={this.setKey}>key</button>
            </div>
        )
    }
}
        

List.jsx

export default class List extends PureComponent {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        console.log(`list${this.props.value} will mount`);
    }

    componentDidMount() {
        console.log(`list${this.props.value} did mount`);
    }

    componentWillUpdate() {
        console.log(`list${this.props.value} will update`);
    }

    componentDidUpdate() {
        console.log(`list${this.props.value} did update`);
    }

    componentWillUnmount() {
        console.log(`list${this.props.value} will unmount`);
    }

    render() {
        const { value } = this.props;
        return(
            <div>
                list{value}
            </div>
        )
    }
}

当点击key按钮后会发生什么呢?先分析一下

时间: 2024-11-05 22:50:05

react列表中,当key改变后发生的事情的相关文章

.Net中使用com组件后发生System.ArithmeticException异常的解决办法(Message=算术运算中发生溢出或下溢。)

最近在开发一个.Net程序,其中涉及到对com组件的调用,或者第三方DLL调用, 在调用完以后如果使用一些小的测试程序继续运行,一切正常,但是在使用带有GUI的form程序,或者WPF程序中,继续执行时,总是出现以下异常Exception: System.ArithmeticExceptionMessage: 算术运算中发生溢出或下溢. "设置属性"System.Windows.FrameworkElement.Height"时引发了异常.",行号为"6&

删除列表中的签字选项后,第一次有删除成功提示,之后没有删除成功的提示?

思路: 1.在debug模式模式下,发现第二次删除与第一次删除所经过的方法一样: 2.这种情况下,说明后台没问题,那么就看看前台,发现,前台的删除功能如下: <a href="${ctx}/signature/delete?id=${b.id}">删除</a> 经过修改为下面后,恢复正常 <a href="${ctx}/signature/delete?id=${b.id}" onclick="return confirmx(

浏览器输入url后发生的事情以及每步可以做的优化

首先总结下输入url按下回车后的大致流程: 查询url的ip地址. 建立tcp连接,连接服务器. 浏览器发起http/https请求. 服务器响应浏览器的请求. 网页的解析与渲染. 下面分析每个过程 查询url的ip地址详细过程: 浏览器解析出url中的域名. 查询浏览器的DNS缓存. 浏览器中没有DNS缓存,则查找本地客户端hosts文件有无对应的ip地址. hosts中无,则查找本地DNS服务器有无对应的缓存. 若本地DNS服务器没有缓存,则向根服务器查询,进行递归查找. 递归查找从顶级域名

React之事件绑定、列表中key的使用

在学习React的Hadding Events这一章节,发现事件回调函数的几种写法,看似区别不大,但实际差异还是蛮大的. class Toggle extends React.Component{ constructor(props) { super(props); this.state = {isToggleOn:false}; //necessary this.bindClick = this.bindClick.bind(this);//推荐写法 }; bindClick(){ this.

easyui combobox 输入列表中不存在的值后直接回车

combobox下拉列表中有数据A,B,C 但是用户输入D后直接回车,输入框则会被清空,因为列表中没有D http://www.jeasyui.com/forum/index.php?topic=3831.0 The user can type text directly into the top of list. The top of list means the textbox component. The user can enter text into the textbox but c

在浏览器地址栏中输入URL后发生了什么

在浏览器地址栏中输入URL后发生了什么 基本流程: ①查询ip地址 ②建立tcp连接,接入服务器 ③浏览器发起http请求 ④服务器后台操作并做出http响应 ⑤网页的解析与渲染 详细步骤如下: 查询ip地址 ①浏览器解析出url中的域名. ②查询浏览器的DNS缓存. ③浏览器中没有DNS缓存,则查找本地客户端hosts文件有无对应的ip地址. ④hosts中无,则查找本地DNS服务器(运营商提供的DNS服务器)有无对应的DNS缓存. ⑤若本地DNS没有DNS缓存,则向根服务器查询,进行递归查找

在浏览器中输入URL按下回车键后发生了什么

在浏览器中输入URL按下回车键后发生了什么 [1]解析URL[2]DNS查询,解析域名,将域名解析为IP地址[3]ARP广播,根据IP地址来解析MAC地址[4]分别从应用层到传输层.网络层和数据链路层分别加入各个层的头部封装为包[5]进行三次握手后,客户端与服务器建立连接[6]客服务器向客户端返回数据,浏览器接收到数据[7]浏览器开始渲染页面 补充:浏览器渲染页面详解 [1]由从服务器接收到的html形成DOM[2]样式被加载和解析,形成css对象模型CSSOM[3]DOM和CSSOM创建一个渲

解释一下,在你往浏览器中输入一个URL后都发生了什么,要尽可能详细(转)

原文链接:解释一下,在你往浏览器中输入一个URL后都发生了什么,要尽可能详细 题目 一步一步解释一下,在你往浏览器中输入一个URL后都发生了什么,要尽可能详细. 解答 这道题目没有所谓的完全的正确答案,这个题目可以让你在任意的一个点深入下去, 只要你对这个点是熟悉的.以下是一个大概流程: 浏览器向DNS服务器查找输入URL对应的IP地址. DNS服务器返回网站的IP地址. 浏览器根据IP地址与目标web服务器在80端口上建立TCP连接 浏览器获取请求页面的html代码. 浏览器在显示窗口内渲染H

Java socket中关闭IO流后,发生什么事?(以关闭输出流为例)

声明:该博文以socket中,关闭输出流为例进行说明. 为了方便讲解,我们把DataOutputstream dout = new DataOutputStream(new BufferedOutputStream(mySocket.getOutputStream()));中的dout做为Socket输出流的代言.同样的,din是输入流的代言. 可以造成dout被关闭的操作有: 1.调用dout.close();或din.close();因为使用这种流关闭,会造成socket被关闭,所以输入输出