开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第8天，点击查看活动详情
前言
今天继续抽出时间来学习React的相关知识：组件
组件
React这里的组件可以说就是一个个类，一个前端项目就是由这些组件构成，组件的传统定义方式有两种
- 函数组件
- class组件
函数组件就是一个接受入参并返回JSX表达式的普通函数
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
root.render(<Welcome name="Tom"/>) // Hello，Tom
class组件则就是显性的去继承React.Component类，不过通常我们可能更喜欢使用函数组件
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
React规定了自定义的组件名称都需要首字母大写，这是因为React将小写字母开头的组件看待为原生的DOM元素
一个组件通过props来接受外界的参数，来实现各种动态的UI效果，传进去的props会被包装成一个对象，同时需要注意它是一个只读属性，不可以在组件内对其进行修改。
state
在React的设计中props负责接受外部属性，同时保持不变，state便用来负责存储内部属性，是私有的同时支持修改。
不过传统的函数组件无法使用state来进行内部数据的存储，因此在没有hook之前只有class组件才可以定义内部state。
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {
date: new Date()}; // state同样被包装为一个对象
}
render() {
return (
<div>
{this.state.date.toLocaleTimeString()}
</div>
);
}
}
// 读取操作
this.state.propertyName
// 修改/写操作
this.setState(propertyName:data)
或者
this.setState((state)=>({propertyName:data}))
我们不要直接修改state而是要使用setState，同时需要注意setState操作是一个异步操作
关于setState我们还要注意，React只会检查新的state和旧的state的第一层的区别，因此对于对象或者数组，我们需要对其进行浅拷贝获取对象并修改来赋值，以便进行修改UI操作。
const obj = [...this.state.obj];
我们可以将state作为props传递给子组件，来实现动态更改子组件状态，state的数据流是向下传递的。
