React学习笔记（一）

react学习笔记（一)

React 是目前最热门的前端框架。

1. Facebook 公司2013年推出
2. 现在最好的社区支持和生态圈
3. 大量的第三方工具

---

JSX 语法

React 使用 JSX 语法，JavaScript 代码中可以写 HTML 代码。

let myTitle = <h5>Hello, world!</h5>;

JSX 语法的最外层，只能有一个节点。// 错误

let myTitle = <p>Hello</p><p>World</p>;

JSX 语法中可以插入 JavaScript 代码，使用大括号。

let myTitle = <p>{'Hello ' + 'World'}</p>

JavaScript 引擎（包括浏览器和 Node）都不认识 JSX，需要首先使用 Babel转码，然后才能运行。React 需要加载两个库：React 和 React-DOM，前者是 React 的核心库，后者是 React 的 DOM适配库。Babel 用来在浏览器转换 JSX 语法，如果服务器已经转好了，浏览器就不需要加载这个库。React 允许用户定义自己的组件，插入网页。组件可以从外部传入参数，内部使用this.props获取参数。组件往往会有内部状态，使用this.state表示。

组件的生命周期

React 为组件的不同生命阶段，提供了近十个钩子方法。

1. componentWillMount()：组件加载前调用
2. componentDidMount()：组件加载后调用
3. componentWillUpdate(): 组件更新前调用
4. componentDidUpdate(): 组件更新后调用
5. componentWillUnmount()：组件卸载前调用
6. componentWillReceiveProps()：组件接受新的参数时调用

---

组件可以通过 Ajax 请求，从服务器获取数据。Ajax 请求一般在componentDidMount方法里面发出。

---

React 的核心思想

1. View 是 State 的输出。view = f(state)，上式中，f表示函数关系。只要 State 发生变化，View 也要随之变化。
2. React 的本质是将图形界面（GUI）函数化。
3. React 只是视图层的解决方案，可以用于任何一种架构。
4. 组件会发生三种通信。向子组件发消息，向父组件发消息，向其他组件发消息。
5. React 只提供了一种通信手段：传参。对于大应用，很不方便。
6. 通信的本质是状态的同步。React 同步状态的基本方法：找到通信双方最近的共同父组件，通过它的state，使得子组件的状态保持同步。
7. Facebook 提出 Flux 架构的概念，被认为是 React 应用的标准架构。
8. 最大特点：数据单向流动。与 MVVM 的数据双向绑定，形成鲜明对比。

Flux 的核心思想

• 不同组件的state，存放在一个外部的、公共的 Store 上面。
• 组件订阅 Store 的不同部分。

• 组件发送（dispatch）动作（action），引发 Store 的更新。

  React 架构的最重要作用：管理 Store 与 View 之间的关系。

• MobX：响应式（Reactive）管理，state 是可变对象，适合中小型项目

• Redux：函数式（Functional）管理，state 是不可变对象，适合大型项目