在看《react小书》高阶组件一节的时候,看到如下代码
import React, { Component } from 'react' export default (WrappedComponent, name) => { class NewComponent extends Component { constructor () { super() this.state = { data: null } } componentWillMount () { let data = localStorage.getItem(name) this.setState({ data }) } render () { return <WrappedComponent data={this.state.data} /> } } return NewComponent }
忽然大脑短路了:return <WrappedComponent data={this.state.data} /> 中为何不用this.props来使用data,而使用this.state呢。
想了一会儿,忽然觉醒,你这是把对子组件的定义和使用搞混了。子组件在定义的时候用this.props来接受未来父组件传来的参数,父组件调用子组件的时候,是直接把父组件的值传过来的,所以用this.state。可以类比函数定义与调用。