~~~ import React from 'react' import PropTypes from 'prop-types' import _ from 'lodash' class Input extends React.Component { constructor(props) { super(props) this.state = { title: '' } } render() { return <div> <input value={this.state.title} onChange={this.onTitleChange}/> <button onClick={this.onSubmit}>提交</button> </div> } onTitleChange = (e) => { this.setState({ title: e.target.value }) } onSubmit = () => { const { submitTitle } = this.props submitTitle(this.state.title) this.setState({ title: '' }) } } // props 類型檢查 Input.propTypes = { submitTitle: PropTypes.func.isRequired } class List extends React.Component { constructor(props) { super(props) } render() { const { list } = this.props return <ul>{list.map((item, index) => { return <li key={item.id}> <span>{item.title}</span> </li> })}</ul> } // 增加 shouldComponentUpdate shouldComponentUpdate(nextProps, nextState) { // _.isEqual 做對象或者數組的深度比較（一次性遞歸到底） if (_.isEqual(nextProps.list, this.props.list)) { // 相等，則不重復渲染 return false } return true // 不相等，則渲染 } } // props 類型檢查 List.propTypes = { list: PropTypes.arrayOf(PropTypes.object).isRequired } class TodoListDemo extends React.Component { constructor(props) { super(props) this.state = { list: [ { id: 'id-1', title: '標題1' }, { id: 'id-2', title: '標題2' }, { id: 'id-3', title: '標題3' } ] } } render() { return <div> <Input submitTitle={this.onSubmitTitle}/> <List list={this.state.list}/> </div> } onSubmitTitle = (title) => { // 正確的用法 this.setState({ list: this.state.list.concat({ id: `id-${Date.now()}`, title }) }) // // 為了演示 SCU ，故意寫的錯誤用法 // this.state.list.push({ // id: `id-${Date.now()}`, // title // }) // this.setState({ // list: this.state.list // }) } } export default TodoListDemo ~~~