React第二站：How can I make a component

EpicMo

2023 年 08 月 21 日

213 次浏览

暂无评论

1130字数

折腾日志学习小记

这是一个不对内容负责的 **随笔** ，仅记录自己学习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 日