Loading... <div class="tip inlineBlock warning"> 这是一个不对内容负责的 **随笔** ,仅记录自己学习React的心路历程和路线。博主也并非从事前端开发,只是想能够开发一些简单的网页和前端项目即可。最终 的目标是能够做一个软件授权管理后台。 </div> ## React的状态 React的组件严格遵守:**UI=render(data)** 的模式: 引入两个名词:state、prop ### Prop 其中 Prop 用于定义外部的接口,其是外部使用组件的时候与组件直接交互的属性,例如: ```js <SampleButton id="sample" borderWidth={2} onClick{onButtonClick} style={{color: "red"}} /> ``` 其中,id,borderWidth这些便是 SampleButton 的 Prop,他直接定义了SampleButton组件内的一些属性。 由此我们可以看到这个是外部与内部交互的一个媒介。 那么组件是如何读取的呢? ```js class Counter entends Component{ constructor(props){ super(props); this.onClickIncrementButton = this.onClickIncrementButton.bind(this); this.onClickDecrementButton = this.onClickDecrementButton.bind(this); this.state = { count: props.initValue || 0 } } } ``` 我们发现,我们在构造函数里面捕获了传入的props的值,这样让我们可以使用它。 ### State State是React组件内维护状态的功能: ```js onClickIncrementButton() { this.setState({count: this.state.count + 1}) } ``` ## 组件的生命周期 ### 装载过程 - constructor - getInitialState - getDefaultProps - componentWillMount - render - componentDidMount ### 更新过程 - componentWillReceiveProps - shouldComponentUpdate - componentWillUpdate - render - componentDidUpdate 最后修改:2023 年 09 月 16 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 0 如果你觉得文章帮到你了,请以沫喝杯奶茶吧~