React 长列表修改时避免全体渲染-优快云博客

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>

    <div id="example"></div>
    <script type="text/babel">
        class Parent extends React.Component {
            constructor() {
                super();
                var list = []
                list.length = 1000
                list.fill(1)
                this.state = {
                    list: list.map((e, i) => i)
                }
            }
            onChange = (value, index) => {
                const list = [...this.state.list]
                list[index] = value
                this.setState({list})
            }
            add = index => {
                const list = [...this.state.list]
                list.splice(index, 0, list.length + 1)
                this.setState({
                    list
                })
            }
            render() {
                return this.state.list.map((e, i) => (
                        <Input 
                            add={this.add}
                            onChange={this.onChange} 
                            key={i} 
                            e={e} 
                            i={i} 
                            list={this.props.list} />
                    ))
            }
        }

        class Input extends React.Component {
            componentDidUpdate() {
                console.log(1)
            }

            shouldComponentUpdate(nextProps, nextState) {
                return nextProps.e !== this.props.e
            }

            render() {
                return (
                    <input value={this.props.e} onChange={e => this.props.onChange(e.target.value, this.props.i)} onKeyDown={(e) => e.key === 'Enter' && this.props.add(this.props.i)} />
                )
            }
        }
        
        ReactDOM.render(
            <Parent />,
            document.getElementById('example')
        );
    </script>

</body>

</html>

转载于:https://www.cnblogs.com/NKnife/p/11346555.html