最近由于工作需要,学习了一下前端框架react,在入门基础的时候,前期很顺利,可是到了props与state的部分遇到了一些问题,经过查阅资料等等一系列工作后,终对这两个概念有了一知半解,现将我的一些感悟写下来,希望可以帮助更多人。
props
props英文翻译是道具的意思,我个人理解为参数,如果我们将react组件看作是一个函数,那么props便是函数接收外部数据所使用的参数。props具有以下特性:
1.不可变(只读性)
props经常被用作渲染组件和初始化状态,当一个组件被实例化之后,它的props
是只读的,不可改变的。如果props
在渲染过程中可以被改变,会导致这个组件显示的形态变得不可预测。只有通过父组件重新渲染的方式才可以把新的props
传入组件中。
2.可以设置默认值
通常,我们会为props设置一个默认值,设置默认值的方法为defaultProps
class ShowIt extends React.Component{ render(){ return(my name is {this.props.name}
); }; }; ShowIt.defaultProps={name:"aabS"}; const ShowName=; ReactDOM.render( ShowName, document.getElementById('example') );
总的来说,props是一个从外部传进组件的参数,主要作为就是从父组件向子组件传递数据,它具有可读性和不变性,只能通过外部组件主动传入新的props来重新渲染子组件,否则子组件的props以及展现形式不会改变。
state
state的英文翻译是状态,而在react中,它也的确是指状态,是指组件的数据状态。
state可以在构造函数中初始化,如下所示:
constructor(props) { super(props); this.state = {date: new Date()}; }
也可以通过setState来修改其初始值:
tick() { this.setState({ date: new Date() }); }
当我们调用该方法时,react会重新调用render()方法,即重新渲染组件。
state与props的区别
state与props的主要区别在于,props不可变,state可变,props是一种从父级向子级传递数据的一种方式,state则仅用于实现交互功能。