2-组件和生命周期

组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，组件的属性可以在组件类的this.props对象上获取，需要注意的是在添加属性时，class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字，组件名称必须以大写字母开头，在作用区内也一样。

1.函数式组件 - 这是定义组件最简单的方式。

2.渲染组件 - 当React元素为用户自定义组件时，它会将JSX接收的属性转换为单个对象传递给组件，此对象被称之为props。

过程：调用ReactDOM.render()函数并传入自定义组件及参数，React调用组件并传入props，组件接收参数并返回React元素，React DOM高效更新DOM。

3.组合&提取

1-1

可提取avatar、userInfo、comment。

4. Props的只读性：所有React组件都必须像纯函数一样保护它们的props不被更改。

5. 函数组件 => class组件

· 创建同名ES6 class : class Demo extends React.Component {}

· 添加一个空的render()，把函数体移到render()中，并把props替换成this.props

5.state（props用于定义外部接口，state用于记录内部状态）

1-2

6.生命周期

在具有许多组件的应用程序中，当组件被销毁时释放所占用的资源是非常重要的。

Clock组件第一次被渲染到DOM中的时候，会为其设置一个计时器，即挂载（mount)，在Clock组件被删除的时候，此计时器会被清除，称为卸载（unmount)。渲染后-componentDidMount，卸载前-componentWillUnmount，更新state-this.setState()。

1-3

> ReactDOM.render()接收到Clock的时候，React会调用Clock组件的构造函数，因为组件需要显示当前时间，所以需要用一个包含当前时间的对象来初始化this.state

> 之后React会调用组件的render()方法来确定页面上展示什么内容，然后React更新DOM来匹配Clock渲染的输出

> 在渲染后React会调用ComponentDidMount()方法，这个方法中组件向浏览器请求设置一个计时器来每秒调用一次组件的tick()

> 浏览器每秒都会调用一次tick方法，这个方法里Clock组件会通过调用setState来进行UI更新，因为setState的调用，React得知了state已经改变，就会重新调用render方法来确定页面输出，从而更新DOM

> 当Clock组件被移除，React会调用componentWillUnmount()来停止计时器。

关于setState(): 是唯一可以给this.state赋值的方式，this.props和this.state可能会异步更新，所以可让setState接收一个函数而不是对象，此函数用上一个state作为第一个参数，此次更新用到的proprs为第二个参数。

1-4

数据向下流动，除了拥有并设置了state的组件，其他组件都无法访问，可以作为props向下传递到子组件中。