~~~ /** * @description 演示 props 和事件 * @author 雙越老師 */ import React from 'react' import PropTypes from 'prop-types' 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) // 'abc' 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> } } // props 類型檢查 List.propTypes = { list: PropTypes.arrayOf(PropTypes.object).isRequired } class Footer extends React.Component { constructor(props) { super(props) } render() { return <p> {this.props.text} {this.props.length} </p> } componentDidUpdate() { console.log('footer did update') } shouldComponentUpdate(nextProps, nextState) { if (nextProps.text !== this.props.text || nextProps.length !== this.props.length) { return true // 可以渲染 } return false // 不重復渲染 } // React 默認：父組件有更新，子組件則無條件也更新！！！ // 性能優化對于 React 更加重要！ // SCU 一定要每次都用嗎？—— 需要的時候才優化 } 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' } ], footerInfo: '底部文字' } } render() { return <div> <Input submitTitle={this.onSubmitTitle}/> <List list={this.state.list}/> <Footer text={this.state.footerInfo} length={this.state.list.length}/> </div> } onSubmitTitle = (title) => { this.setState({ list: this.state.list.concat({ id: `id-${Date.now()}`, title }) }) } } export default TodoListDemo ~~~