代表 HTML 的 div 标签，而 <welcome> 则代表一个组件，并且需在作用域内使用 Welcome。所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

● state与生命周期

State 与 props 类似，但是 state 是私有的，并且完全受控于当前组件。

componentDidMount() 方法会在组件已经被渲染到 DOM 中后运行，所以，最好在这里设置计时器：

① 当 <clock> 被传给 ReactDOM.render() 的时候，React 会调用 Clock 组件的构造函数。因为 Clock 需要显示当前的时间，所以它会用一个包含当前时间的对象来初始化 this.state。我们会在之后更新 state。

② 之后 React 会调用组件的 render() 方法。这就是 React 确定该在页面上展示什么的方式。然后 React 更新 DOM 来匹配 Clock 渲染的输出。

③ 当 Clock 的输出被插入到 DOM 中后，React 就会调用 ComponentDidMount() 生命周期方法。在这个方法中，Clock 组件向浏览器请求设置一个计时器来每秒调用一次组件的 tick() 方法。

④ 浏览器每秒都会调用一次 tick() 方法。 在这方法之中，Clock 组件会通过调用 setState() 来计划进行一次 UI 更新。得益于 setState() 的调用，React 能够知道 state 已经改变了，然后会重新调用 render() 方法来确定页面上该显示什么。这一次，render() 方法中的 this.state.date 就不一样了，如此以来就会渲染输出更新过的时间。React 也会相应的更新 DOM。

⑤ 一旦 Clock 组件从 DOM 中被移除，React 就会调用 componentWillUnmount() 生命周期方法，这样计时器就停止了。

>>>正确地使用 State：

● 事件处理

注意：这里一般用箭头函数比较方便，自动绑定 this

● 条件渲染

使用 if

● 列表 & Key

● 表单

● 使用 PropTypes 进行类型检查

注意：

自 React v15.5 起，React.PropTypes 已移入另一个包中。请使用 prop-types 库 代替。

① 限制单个元素

你可以通过 PropTypes.element 来确保传递给组件的 children 中只包含一个元素。

② 默认 Prop 值

您可以通过配置特定的 defaultProps 属性来定义 props 的默认值：

● React 发起 ajax 请求（接口请求）

以 Axios 为例。

我们推荐你在 componentDidMount 这个生命周期函数中发起 AJAX 请求。这样做你可以拿到 AJAX 请求返回的数据并通过 setState 来更新组件。

● React 路由

我们访问一个 URL，最终定向到哪个资源，这部分工作的处理程序，就是路由。

路由也是有状态的，不同状态对应不同功能，路由的参数传递，同样也是绑定在 Props属性 上面。

>>>

---

---

閱讀更多 Python大星 的文章

關鍵字: 知识点 Java HTML

---