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

最新推荐文章于 2025-06-10 10:00:59 发布

weixin_33744854

最新推荐文章于 2025-06-10 10:00:59 发布

阅读量432

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hefenghefeng/p/7008495.html

本文通过一个React组件的具体实例，详细解析了React组件的各个生命周期方法，包括挂载、更新及卸载阶段的方法调用顺序，并展示了如何触发这些生命周期的变化。

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

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>
        )
    }
}