一、React 的历史和现状

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

https://2018.stateofjs.com/cn/front-end-frameworks/react/

二、安装

在网站中引入 React（script引入）

<!-- ... 其它 HTML ... -->
  <!-- DOM 容器 -->
  <div id="app"></div>

  <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

  <!-- 加载babel，以使用JSX-->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <!-- 加载我们的 React 组件。-->
  <script src="like_button.js"></script>

</body>

引入的库：React.js、React-dom.js、babel.js(for JSX)

• ReactDom.render 渲染元素
• React.createElement 创建元素
• React.Component 定义组件
• JSX 不是必须，JSX 元素是 React.createElement(component,props, ...children) 的语法糖

npm引入（推荐）

npx create-react-app my-app
cd my-app
npm start

三、核心概念

Demo地址

3.1 Hello World

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

3.2 JSX 简介

• 可大括号内放置任何有效的 JavaScript 表达式
• 建议：将 JSX 拆分为多行，同时将内容包裹在括号中
• VSCode 设置 JSX 自动填充（仅限 .js 文件）

3.3 元素渲染

• 元素是构成 React 应用的最小砖块。
• React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。

3.4 组件 & Props

• 函数组件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

• class 组件

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

注意： 组件名称必须以大写字母开头。
React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<div /> 代表 HTML 的 div 标签，而 <Welcome /> 则代表一个组件，并且需在作用域内使用 Welcome。

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

3.5 State & 生命周期

• 构造函数是唯一可以给 this.state 赋值的地方：

constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }

• 不要直接修改 State

this.setState({ comments: ['aaa','bbb'] })

• State 的更新可能是异步的

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

• State 的更新会被合并（浅合并）

image.png

3.6 事件处理

• React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同:

传统的 HTML：

<button onclick="clickHandler()">点我</button>

在 React 中略微不同：

<button onclick={clickHandler}>点我</button>

3.7 条件渲染

3.8 列表 & Key

3.9 表单

3.10 状态提升

3.11 组件 vs 集成

3.12 React 哲学

四、深入了解组件

概览

React 的组件可以定义为 class 或函数的形式。class 组件目前提供了更多的功能，这些功能将在此章节中详细介绍。如需定义 class 组件，需要继承 React.Component：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

组件的生命周期

http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

其他API

• setState()
• forceUpdate()

class 属性

• defaultProps
• displayName

实例属性

• props
• state

五、React 生态

• Router 路由
  中文官网
  官方教程

• 状态管理
  redux官网
  官方示例

六、React vs Vue ？未来 ？(developed vs developing)

React.js与Vue.js：流行框架的比较