React 起源于 Facebook 的内部项目，他从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机。

React框架本身和我们常用的JavaScript MVC框架，如：AngularJS，Backbone，Ember等，没有直接的可比性。在React的官方博客中明确阐述了React不是一个MVC框架，而是一个用于构建组件化UI的库（构建用户界面的Javascript库），是一个前端界面开发工具。所以顶多算是MVC中的V（view视图层）。

React的组件具有如下的特性：

• 可组合：简单组件可以组合为复杂的组件
• 可重用：每个组件都是独立的，可以被多个组件使用
• 可维护：和组件相关的逻辑和UI都封装在了组件的内部，方便维护
• 可测试：因为组件的独立性，测试组件就变得方便很多。

image.png

ES6

https://www.runoob.com/w3cnote/es6-tutorial.html
https://es6.ruanyifeng.com/

ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。

ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

查看 Node 已经实现的 ES6 特性

node --v8-options | grep harmony

image.png

webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器 (module bundler) 。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图 (dependency graph) ，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle 。

webpack 主要有四个核心概念:

• 入口 (entry)
• 输出 (output)
• loader
• 插件 (plugins)

入口 (entry)

入口会指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。在 webpack 中入口有多种方式来定义，如下面例子：

单个入口（简写）语法:

const config = {
  entry: "./src/main.js"
}

对象语法:

const config = {
  app: "./src/main.js",
  vendors: "./src/vendors.js"
}

输出 (output):

output 属性会告诉 webpack 在哪里输出它创建的 bundles ，以及如何命名这些文件，默认值为 ./dist:

const config = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, 'dist')
  }
}

loader

loader 让 webpack 可以去处理那些非 JavaScript 文件（ webpack 自身只理解 JavaScript ）。loader 可以将所有类型的文件转换为 webpack 能够有效处理的模块，例如，开发的时候使用 ES6 ，通过 loader 将 ES6 的语法转为 ES5 ，如下配置：

const config = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: "babel-loader",
          options: [
            presets: ["env"]
          ]
      }
    ]
  }
}

插件 (plugins)

loader 被用于转换某些类型的模块，而插件则可以做更多的事情。包括打包优化、压缩、定义环境变量等等。插件的功能强大，是 webpack 扩展非常重要的利器，可以用来处理各种各样的任务。使用一个插件也非常容易，只需要 require() ，然后添加到 plugins 数组中。

// 通过 npm 安装
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 用于访问内置插件 
const webpack = require('webpack'); 
 
const config = {
  module: {
    rules: [
      {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: "babel-loader"
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

利用 webpack 搭建应用

webpack.config.js

const path = require('path');
 
module.exports = {
  mode: "development", // "production" | "development"
  // 选择 development 为开发模式， production 为生产模式
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: [
          presets: ["env"]
        ]
      }
    ]
  },
  plugins: [
    ...
  ]
}

上述例子构建了一个最简单的配置，webpack 会从入口 main.js 文件进行构建，通过 loader 进行js转换，输出一个为 bundle.js 的文件，至此一整个过程就构建完成。

gulp

gulp 是一个基于流的自动化构建工具，具有易于使用、构建快速、插件高质和易于学习的特点，常用于轻量级的工程中。

如何使用？

全局安装 gulp:

$ npm install --global gulp

在项目中引入依赖:

$ npm install --save-dev gulp

在项目根目录下创建名为 gulpfile.js 的文件:

const gulp = require('gulp');

// default 表示一个任务名，为默认执行任务
gulp.task('default', function() {
  // 放置默认的任务代码
})

运行 gulp:

$ gulp
利用 gulp 搭建应用
const gulp = require('gulp');
const uglify = require("gulp-uglify");  
 
gulp.task('default', function() {
  gulp.src('./src/main.js')
      .pipe(uglify())
      .pipe(gulp.dest('./dist'));
})

虚拟DOM

在JavaScript中DOM操作是独立成为一个分支的。各浏览器在实现DOM操作库也是大同小异，都是在单独的模块中实现了DOM操作，由于各种技术上的原因，DOM操作的性能损耗相对于其他操作是很大的。在前端开发中都是需要特别尽量保持较小的DOM操作次数来提高性能。

React作为一个UI框架，不可避免要有界面上元素的交互。为了提高性能，React在操作页面交互时引入了虚拟DOM的概念。虚拟DOM是在React中用JavaScript重新实现的一个DOM模型，和原生的DOM并没有多少关系，只是借鉴了原生DOM的一些概念。虚拟DOM并没有完全实现DOM，只是保留了元素直接的层级关系和少量必要的属性。因为减少了不必要的复杂性，实践校验的结果是虚拟DOM的性能比原生DOM高很多。来看看普通DOM和虚拟DOM在代码上的差别。

如下是使用原生DOM生成的元素：

var a = document.createElement('a')
a.setAttribute('class', 'link')
a.setAttribute('href', 'https://github.com/facebook/react')
a.appendChild(document.createTextNode('React'))

那么使用虚拟DOM则代码为如下：

var a = React.createElement('a', {
    className: 'link',
    href: 'https://github.com/facebook/react'
}, 'React')

可以看到React中使用了自己实现的createElement方法来生成元素DOM结构。

基于React开发中构建的DOM都是通过虚拟DOM进行的。在React的实际的使用中，需要根据不同的数据展现不同的UI,当数据变化时，React会重新构建整个DOM树，然后将当前的DOM树和之前的比较，得到DOM树的区别，然后仅仅把变化的部分反映到实际的浏览器UI更新上。React会在同一个事件循环内合并DOM的变化，只是会对比开始和结束的DOM变化，忽略中间过程的DOM变化。尽管每次数据变化都是重新构建DOM树，但虚拟DOM的操作性能极高。这样使用React时，开发者不在需要关心数据变化时页面上DOM元素的更新，而只是关心各个数据状态下页面实际展现的效果。此外，因为React使用了由JavaScript实现的虚拟DOM，意味着可以在服务器端完成HTML结构的构建。

JSX

JSX是React的重要组成部分，他使用类似XML标记的方式来声明界面及关系，所以他只是一个文档规范。如下是一个在React里面使用JSX的例子：

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

React.render(<HelloMessage name="John" />, mountNode);

可以看到如上使用了JSX的代码，像是HTML和JavaScript代码的混合体。很多人很不习惯这样的编码方式，认为这和我们一直倡导的表现和逻辑分离的思想相违背，是一种倒退。那么React这样的设计用意是啥呢？

React一个主要的设计理念是编写简单容易理解的代码。HTML模板的作用是让表现和逻辑分离，但是很多情况下模板还是严重依赖于业务逻辑，两者没有办法做到完全的松耦合。稍微复杂一点的例子，比如AngularJS使用了一套独特的机制来让UI和逻辑交互，示例代码如下。

<ul class="unstyled">
  <li ng-repeat="todo in todoList.todos">
    <input type="checkbox" ng-model="todo.done">
    <span class="done-"></span>
  </li>
</ul>

使用AngularJS的确从代码角度做到表现和逻辑分离，但是在HTML里面混入了大量的属性标记，这些标记但从语义上很难理解，新手比如要整个熟悉Angular中每个类似ng-*对应的用法及意义才能理解整个逻辑，所以有一定的入门门槛。如上例子使用JSX方式编写如下：

render: function () {
  var lis = this.todoList.todos.map(function (todo) {
    return  (
      <li>
        <input type="checkbox" checked={todo.done}>
        <span className="done-{todo.done}">{todo.text}</span>
      </li>);
  });
  return (
    <ul class="unstyled">
      {lis}
    </ul>
  );
}

可以看到，JSX中除了使用HTML标记之外，并没有复杂的标记。这种自然而直观的方式直接降低了React的学习门槛并且让代码更容易理解。

JSX只是简化了React的使用难度，但并不是必须的。在React中也可以不使用JSX，而是使用原生JavaScript的方式编写代码。在实际使用过程中也是把JSX转换成了JavaScript代码来运行的。React官方网站上提供了一个在线转换JSX到原生JavaScript代码的工具，通过这个工具也可以体会JSX使用上的优势及其内在原理。

源码项目结构

React的相关代码都放在packages文件夹里。

├── packages --------------------- React实现的相关代码
│ ├── create-subscription ------ 在组件里订阅额外数据的工具
│ ├── events ------------------- React事件相关
│ ├── react -------------------- 组件与虚拟DOM模型
│ ├── react-art ---------------- 画图相关库
│ ├── react-dom ---------------- ReactDom
│ ├── react-native-renderer ---- ReactNative
│ ├── react-reconciler --------- React调制器
│ ├── react-scheduler ---------- 规划React初始化，更新等等
│ ├── react-test-renderer ------ 实验性的React渲染器
│ ├── shared ------------------- 公共代码
│ ├── simple-cache-provider ---- 为React应用提供缓存
这里面我们主要关注react、reconciler、renderer三个模块。

• react(渲染模型)。记录了页面如何布局，主要信息也就是前面提到的虚拟节点，它更像是MVC中Model。对应目录react下代码。

• reconciler(调节器)。它主要负责更新虚拟DOM，并且在调整完成后发出绘制命令，不负责真正的绘制。不严谨的说你可以把它看作MVC中的Controller，之所以说“不严谨”是因为它的侧重点更在于桥接，比Controller更单纯。对应目录react-reconciler下代码。

• renderer(渲染器)，分为DOM渲染器和Native渲染器。其中一个重要的作用是根据“调节器”指定的虚拟DOM绘制页面(即创建真正的DOM)。另一个作用是作为整个React项目的入口，如开始绘制、查找DOM元素等。对应目录react-dom/react-native-renderer下代码。

之所以react提出 "Learn Once, Write Anywhere" 的理念，也因为它的这种架构设计。开发者只需要了解基本的组件、事件分发等概念就可以开发任何端的界面。react、react-reconciler可以和任何其他渲染器组合。

React常用的几个API

React 组件 API常用的有以下7个:

设置状态：setState
替换状态：replaceState
设置属性：setProps
替换属性：replaceProps
强制更新：forceUpdate
获取DOM节点：findDOMNode
判断组件挂载状态：isMounted

设置状态:setState

setState(object nextState[, function callback])

参数说明

• nextState，将要设置的新状态，该状态会和当前的state合并
• callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。

合并nextState和当前state，并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。

关于setState

不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。

setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。

setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。

实例

React 实例

class Counter extends React.Component{
  constructor(props) {
      super(props);
      this.state = {clickCount: 0};
      this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    this.setState(function(state) {
      return {clickCount: state.clickCount + 1};
    });
  }
  render () {
    return (<h2 onClick={this.handleClick}>点我！点击次数为: {this.state.clickCount}</h2>);
  }
}
ReactDOM.render(
  <Counter />,
  document.getElementById('example')
);

实例中通过点击 h2 标签来使得点击计数器加 1。

---

替换状态：replaceState

replaceState(object nextState[, function callback])

• nextState，将要设置的新状态，该状态会替换当前的state。
• callback，可选参数，回调函数。该函数会在replaceState设置成功，且组件重新渲染后调用。

replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。

---

设置属性：setProps

setProps(object nextProps[, function callback])

• nextProps，将要设置的新属性，该状态会和当前的props合并
• callback，可选参数，回调函数。该函数会在setProps设置成功，且组件重新渲染后调用。

设置组件属性，并重新渲染组件。

props相当于组件的数据流，它总是会从父组件向下传递至所有的子组件中。当和一个外部的JavaScript应用集成时，我们可能会需要向组件传递数据或通知React.render()组件需要重新渲染，可以使用setProps()。

更新组件，我可以在节点上再次调用React.render()，也可以通过setProps()方法改变组件属性，触发组件重新渲染。

---

替换属性：replaceProps

replaceProps(object nextProps[, function callback])

• nextProps，将要设置的新属性，该属性会替换当前的props。
• callback，可选参数，回调函数。该函数会在replaceProps设置成功，且组件重新渲染后调用。

replaceProps()方法与setProps类似，但它会删除原有 props。

---

强制更新：forceUpdate

forceUpdate([function callback])

参数说明

• callback，可选参数，回调函数。该函数会在组件render()方法调用后调用。

forceUpdate()方法会使组件调用自身的render()方法重新渲染组件，组件的子组件也会调用自己的render()。但是，组件重新渲染时，依然会读取this.props和this.state，如果状态没有改变，那么React只会更新DOM。

forceUpdate()方法适用于this.props和this.state之外的组件重绘（如：修改了this.state后），通过该方法通知React需要调用render()

一般来说，应该尽量避免使用forceUpdate()，而仅从this.props和this.state中读取状态并由React触发render()调用。

---

获取DOM节点：findDOMNode

DOMElement findDOMNode()

• 返回值：DOM元素DOMElement

如果组件已经挂载到DOM中，该方法返回对应的本地浏览器 DOM 元素。

当render返回null 或 false时，this.findDOMNode()也会返回null。

从DOM 中读取值的时候，该方法很有用，如：获取表单字段的值和做一些 DOM 操作。

---

判断组件挂载状态：isMounted

bool isMounted()

• 返回值：true或false，表示组件是否已挂载到DOM中

isMounted()方法用于判断组件是否已挂载到DOM中。可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错。

HTML模板

在使用React之前，我们必须要先引入三个库——react.js/react-dom.js/browser.min.js

<!DOCTYPE html>
<html>
  <head>
    <script src="../../react.js"></script>
    <script src="../../react-dom.js"></script>
    <script src="../../browser.min.js"></script>
  </head>
  <body>
  </body>
</html>

JSX比较特殊的是允许Javascript和HTML的混写，看一个简单的例子：

   <div id="container"></div>

    <script type="text/babel">
    let value = "demo1";
    let buttonName = "submit";
      ReactDOM.render(
        <div>
          <input type="text" value={value}/> //注意单标签一定要闭合“/”,否则会报错
          <button>{buttonName}</button>//在{}中插入变量
        </div>,
        document.getElementById("container")
      )
    </script>

ReactDOM.render是React的最基本方法用于将模板转为HTML语言，并插入指定的DOM节点。ReactDOM.render(template,targetDOM),该方法接收两个参数：第一个是创建的模板，多个dom元素外层需使用一个标签进行包裹，如<div>；第二个参数是插入该模板的目标位置。若要为创建的某个元素增加class属性，不能直接定义class而要用className，因为class是javascript中的保留字。例如给input添加className并更改样式：

    <input type="text" className="userName" value={value}/> 
 
    .userName{background: yellow}//在CSS样式中定义

同样可以定义行内样式,将所有的样式包裹在一个对象中,以类似变量的形式给style属性赋值,注意样式属性要用驼峰命名法表示，如:backgroundColor而不是background-color;fongSize而不是font-size,

<input type="text" style={{"backgroundColor":"yellow","color":"red"}} value={value}/> 

另外可以直接将样式赋值给一个变量，把变量赋值给style属性，如下：

    <div id="container"></div>
    <script type="text/babel">
    let value = "demo1";
    let buttonName = "submit";
    let inputStyle = {
      "backgroundColor":"yellow",
      "color":"red"
    };
      ReactDOM.render(
        <div>
          <input type="text" style={inputStyle} value={value}/> 
          <button>{buttonName}</button>
        </div>,
        document.getElementById("container")
      )
    </script>

React.Component

组件的生命周期可分成三个状态：

• Mounting：已插入真实 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真实 DOM

React16废弃的三个生命周期函数

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

注：目前在16版本中componentWillMount，componentWillReceiveProps，componentWillUpdate并未完全删除这三个生命周期函数，而且新增了UNSAFE_componentWillMount，UNSAFE_componentWillReceiveProps，UNSAFE_componentWillUpdate三个函数，官方计划在17版本完全删除这三个函数，只保留UNSAVE_前缀的三个函数，目的是为了向下兼容，但是对于开发者而言应该尽量避免使用他们，而是使用新增的生命周期函数替代它们

取而代之的是两个新的生命周期函数

• static getDerivedStateFromProps
• getSnapshotBeforeUpdate

我们将React的生命周期分为三个阶段，然后详细讲解每个阶段具体调用了什么函数，这三个阶段是：

• 挂载阶段
• 更新阶段
• 卸载阶段

生命周期的方法有：

• componentWillMount 在渲染前调用,在客户端也在服务端。

• componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

• componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

• shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
  可以在你确认不需要更新组件时使用。

• componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

• componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

• componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

这些方法的详细说明，可以参考官方文档。

image.png

React 中拥有多种不同类型的组件，我们先从 React.Component 的子类开始介绍：

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// 用法示例: <ShoppingList name="Mark" />

我们马上会讨论这些又奇怪、又像 XML 的标签。我们通过使用组件来告诉 React 我们希望在屏幕上看到什么。当数据发生改变时，React 会高效地更新并重新渲染我们的组件。

其中，ShoppingList 是一个 React 组件类，或者说是一个 React 组件类型。一个组件接收一些参数，我们把这些参数叫做 props（“props” 是 “properties” 简写），然后通过 render 方法返回需要展示在屏幕上的视图的层次结构。

render 方法的返回值描述了你希望在屏幕上看到的内容。React 根据描述，然后把结果展示出来。更具体地来说，render 返回了一个 React 元素，这是一种对渲染内容的轻量级描述。大多数的 React 开发者使用了一种名为 “JSX” 的特殊语法，JSX 可以让你更轻松地书写这些结构。语法 <div /> 会被编译成 React.createElement('div')。上述的代码等同于：

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

如果你对这个比较感兴趣，可以查阅 API 文档了解有关 createElement() 更详细的用法。但在接下来的教程中，我们并不会直接使用这个方法，而是继续使用 JSX。

在 JSX 中你可以任意使用 JavaScript 表达式，只需要用一个大括号把表达式括起来。每一个 React 元素事实上都是一个 JavaScript 对象，你可以在你的程序中把它当保存在变量中或者作为参数传递。

前文中的 ShoppingList 组件只会渲染一些内置的 DOM 组件，如<div />、<li />等。但是你也可以组合和渲染自定义的 React 组件。例如，你可以通过 <ShoppingList /> 来表示整个购物清单组件。每个组件都是封装好的，并且可以单独运行，这样你就可以通过组合简单的组件来构建复杂的 UI 界面。

复合组件

我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。

以下实例我们实现了输出网站名字和网址的组件：

React 实例

function Name(props) {
    return <h1>网站名称：{props.name}</h1>;
}
function Url(props) {
    return <h1>网站地址：{props.url}</h1>;
}
function Nickname(props) {
    return <h1>网站小名：{props.nickname}</h1>;
}
function App() {
    return (
    <div>
        <Name name="菜鸟教程" />
        <Url url="http://www.runoob.com" />
        <Nickname nickname="Runoob" />
    </div>
    );
}
 
ReactDOM.render(
     <App />,
    document.getElementById('example')
);

React的三大属性（state、props、ref）

属性一：state

1）state是组件对象中最重要的属性，值是一个对象(可以包含多个数组，有点像vue中的data属性)

2）组件被称为“状态机”，通过更新组件的state来更新对应的页面显示

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

操作state通常要经历三个状态

//1) 初始化状态:

constructor (props) {
   super(props)
   this.state = {
        stateProp1 : value1,
        stateProp2 : value2
   }
}

//2) 读取某个状态值

this.state.statePropertyName

//3) 更新状态---->组件界面更新

this.setState({
stateProp1 : value1,
stateProp2 : value2
})

只要你对HTML有所了解，应该能够理解<a>标签的href属性是什么意思。延伸到React当中，属性就被称作props（properties的缩写）。组件之间可以通过Props进行交互。

class ParentComponent extends React.Component {
    render() {
        return <ChildComponent message="Hello World"/>;
    }
}
class ChildComponent extends React.Component {
    render() {
        return <p>And then I said, “{this.props.message}”</p>;
    }
}

也正因如此，React当中的数据流是单向的：数据只能从父组件传向子组件，反过来则不行。

可是组件不可能只接受从父组件传来的数据（例如还有用户在input当中的输入），这时state就派上了用场。

在组建中，我们可以通过一个叫setState的方法来修改state，一般我们都会在事件处理的方法中调用它：

class MyComponent extends React.Component {
    handleClick = (e) => {
        this.setState({clicked: true});
    }
    render() {
        return <a href="#" onClick={this.handleClick}>Click me</a>;
    }
}

一般React应用当中的绝大多数数据都是prop，只有当用户输入内容时才会使用state来处理。

注意在上述的代码中，我们使用了自动绑定的语法，如果你想了解更多可以阅读官方文档Handling Events。

案例演示

需求： 点击组件，让其中的文字发生变化

image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="obj"></div>
    <script type="text/javascript" src="./js/react.development.js"></script>
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <script type="text/javascript" src="./js/babel.min.js"></script>
    <script type="text/babel">
        
                //自定义Like组件
        class Like extends React.Component{
                   //定义初始化状态
            constructor(props){
            super(props)  //交给父类去执行
            this.state={  //定义state属性，并添加一个isLikeMe数据
            isLikeMe:false

           }
                   
                   //强制绑定，让函数handleClick等于当前组件
           this.handleClick= this.handleClick.bind(this)

           }
                   //定义操作函数，注意函数里面的this是undefined
 
           handleClick(){
                   //更新state状态
           const isLikeMe = !this.state.isLikeMe  
           this.setState({
           isLikeMe
           })

           }

           render(){
                   //读取状态
           const {isLikeMe} = this.state
           return <h1 onClick={this.handleClick}>{isLikeMe ? '我喜欢你':'你喜欢我'}</h1>

           }

        }


          //渲染
        ReactDOM.render(<Like />, document.getElementById('obj'))
    </script>
</body>
</html>

1.更新state状态定义的函数里面的this不是指向当前对象的，需要用bind强制绑定this为当前组件

2.强制绑定this: this.handleClick= this.handleClick.bind(this)

属性二：props

1、理解：

1）每个组件对象都会有props(properties的简写)属性

2）组件标签中所有的属性都保存在props中

2、作用：

1）通过标签属性从组件外向组件内传递变化的数据

2）组件内部不需要修改props数据

3、props的操作：

//1）内部读取某个属性值

this.props.propertyName

//2) 对props中的属性值进行类型限制和必要性限制

方法一：新版本中已经被弃用
Person组件名：

Person.propTypes={

       name: React.PropTypes.string.isRequired,
       age:React.PropTypes.number.isRequired
}

方法二：
需要用到prop-types.js文件

Person.propTypes={
         name:PropTypes.string.isRequired

        }

//3）扩展属性：对象的所有属性通过props传递

<Person {...person} />   //默认传递了所有属性

//4)默认属性值

Person.defaultProps = {
     name:"Mary"
}

//5)组件类的构造函数，

constructor(props){
     super(props)
    console.log(props)//里面存放所有属性
}

如果我们需要向组件传递参数，可以使用 this.props 对象,实例如下：

React 实例

function HelloMessage(props) {
    return <h1>Hello {props.name}!</h1>;
}
 
const element = <HelloMessage name="Runoob"/>;
 
ReactDOM.render(
    element,
    document.getElementById('example')
);

以上实例中 name 属性通过 props.name 来获取。

注意，在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

实例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="ul"></div>
    <script type="text/javascript" src="./js/react.development.js"></script>
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <script type="text/javascript" src="./js/prop-types.js"></script>
    <script type="text/javascript" src="./js/babel.min.js"></script>
    <script type="text/babel">
        
        function List(props){

        return (
        <ul>
        <li>姓名：{props.name}</li>
        <li>年龄: {props.age}</li>
        <li>性别:{props.sex}</li>
        </ul>

        )

        }
        
        const person ={
        name:'xxm',
        age:18,
        sex:'女'
        }
    
       //设置默认属性    
        List.defaultProps={

        age:55,
        sex:"男"

        }

        //对类型进行限制和必要性限制
         List.propTypes={
         name:PropTypes.string.isRequired

        }
         //使用扩展属性
        ReactDOM.render(<List {...person}/>, document.getElementById('ul'))
    </script>
</body>
</html>

React.PropTypes

React.PropTypes 在 React v15.5 版本后已经移到了 prop-types 库。

<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>

Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。

以下实例创建一个 Mytitle 组件，属性 title 是必须的且是字符串，非字符串类型会自动转换为字符串 ：

React 16.4 实例

var title = "菜鸟教程";
// var title = 123;
class MyTitle extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.title}</h1>
    );
  }
}
 
MyTitle.propTypes = {
  title: PropTypes.string
};
ReactDOM.render(
    <MyTitle title={title} />,
    document.getElementById('example')
);

更多验证器

MyComponent.propTypes = {
    // 可以声明 prop 为指定的 JS 基本数据类型，默认情况，这些数据是可选的
   optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,
 
    // 可以被渲染的对象 numbers, strings, elements 或 array
    optionalNode: React.PropTypes.node,
 
    //  React 元素
    optionalElement: React.PropTypes.element,
 
    // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
    optionalMessage: React.PropTypes.instanceOf(Message),
 
    // 用 enum 来限制 prop 只接受指定的值。
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
 
    // 可以是多个对象类型中的一个
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),
 
    // 指定类型组成的数组
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
 
    // 指定类型的属性构成的对象
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
 
    // 特定 shape 参数的对象
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),
 
    // 任意类型加上 `isRequired` 来使 prop 不可空。
    requiredFunc: React.PropTypes.func.isRequired,
 
    // 不可空的任意类型
    requiredAny: React.PropTypes.any.isRequired,
 
    // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  }
}

数据自顶向下流动

父组件或子组件都不能知道某个组件是有状态还是无状态，并且它们不应该关心某组件是被定义为一个函数还是一个类。

这就是为什么状态通常被称为局部或封装。 除了拥有并设置它的组件外，其它组件不可访问。

这通常被称为自顶向下或单向数据流。 任何状态始终由某些特定组件所有，并且从该状态导出的任何数据或 UI 只能影响树中下方的组件。

如果你想象一个组件树作为属性的瀑布，每个组件的状态就像一个额外的水源，它连接在一个任意点，但也流下来。

state 和 props 区别

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

以下实例演示了如何在应用中组合使用 state 和 props 。我们可以在父组件中设置 state， 并通过在子组件上使用 props 将其传递到子组件上。在 render 函数中, 我们设置 name 和 site 来获取父组件传递过来的数据。

React 实例

class WebSite extends React.Component {
  constructor() {
      super();
 
      this.state = {
        name: "菜鸟教程",
        site: "https://www.runoob.com"
      }
    }
  render() {
    return (
      <div>
        <Name name={this.state.name} />
        <Link site={this.state.site} />
      </div>
    );
  }
}
 
 
 
class Name extends React.Component {
  render() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
}
 
class Link extends React.Component {
  render() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
}
 
ReactDOM.render(
  <WebSite />,
  document.getElementById('example')
);

属性3：ref与事件处理

1、理解：

1）组件内的标签都可以定义ref属性来标识自己
2）在组件中可以通过this.msgInput来得到真实的DOM元素
3）作用：通过ref获取到组件特定的标签对象，进行读取相关数据

//ref使用方式一：

<input type="text" ref="content"/>


//ref使用方式二：
<input type="text" ref={input=>this.input=input}/>

//input=>this.input=input 的含义是将当前的input 赋值给组件里面的input

2、事件处理

1）通过onXxx属性指定组件的事件处理函数
2）React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）
3）通过event.target可以得到发生事件的DOM元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="obj1"></div>
    <script type="text/javascript" src="./js/react.development.js"></script>
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <script type="text/javascript" src="./js/prop-types.js"></script>
    <script type="text/javascript" src="./js/babel.min.js"></script>
    <script type="text/babel">
        
        class MyComponent extends React.Component{

        constructor(props){
        super(props)
                 //给处理函数强制绑定this
        this.handleClick=this.handleClick.bind(this)
        this.handleBlur = this.handleBlur.bind(this)

        }


        handleClick(){

        alert(this.input.value)


        }

        handleBlur(event){

          alert(event.target.value)
        }

        render(){

        return (
              <div>
                  <input type="text" ref="content"/>
                  <input type="text" ref={input=>this.input=input}/>
                  <button onClick={this.handleClick}>点击按钮</button>
                  <input  type="text" placeholder="请输入数据" onBlur={this.handleBlur} />
              </div>
        )

        }

        }

        

        ReactDOM.render(<MyComponent />, document.getElementById("obj1"))
    </script>
</body>
</html>

React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:

驼峰式写法

React 事件绑定属性的命名采用驼峰式写法，而不是小写。
如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)
HTML 通常写法是：

<button onclick="activateLasers()">
  激活按钮
</button>

React 中写法为：

<button onClick={activateLasers}>
  激活按钮
</button>

阻止默认行为

在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为， 你必须明确的使用 preventDefault。
例如，通常我们在 HTML 中阻止链接默认打开一个新页面，可以这样写：

<a href="#" onclick="console.log('点击链接'); return false">
  点我
</a>

在 React 的写法为：

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();//阻止处理click，既不执行下方的打印
    console.log('链接被点击');
  }
 
  return (
    <a href="#" onClick={handleClick}>
      点我
    </a>
  );
}

实例中 e 是一个合成事件。

使用 React 的时候通常你不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器。你仅仅需要在这个元素初始渲染的时候提供一个监听器。

类的方法默认是不会绑定 this 的

<button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>

例如 onClick={this.handleClick}，你应该为这个方法绑定 this

如下面的实例，类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。

绑定方式

1、bind绑定

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
 
    // 这边绑定是必要的，这样 `this` 才能在回调函数中使用
    this.handleClick = this.handleClick.bind(this);
  }
 
  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }
 
  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}
 
ReactDOM.render(
  <Toggle />,
  document.getElementById('example')
);

再看一个例子：

<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

如果使用 bind 让你很烦，这里有两种方式可以解决。

2、属性初始化器 绑定回调函数

class LoggingButton extends React.Component {
  // 这个语法确保了 `this` 绑定在  handleClick 中
  // 这里只是一个测试
  handleClick = () => {
    console.log('this is:', this);
  }
 
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

3、 箭头函数 绑定回调函数

如果你没有使用属性初始化器语法，你可以在回调函数中使用 箭头函数：

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }
 
  render() {
    //  这个语法确保了 `this` 绑定在  handleClick 中
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

使用这个语法有个问题就是每次 LoggingButton 渲染的时候都会创建一个不同的回调函数。在大多数情况下，这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。

向事件处理程序传递参数

通常我们会为事件处理程序传递额外的参数。例如，若是 id 是你要删除那一行的 id，以下两种方式都可以向事件处理程序传递参数：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

上述两种方式是等价的。
上面两个例子中，参数 e 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式，事件对象必须显式的进行传递，但是通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

值得注意的是，通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面，例如:

class Popper extends React.Component{
    constructor(){
        super();
        this.state = {name:'Hello world!'};
    }
    
    preventPop(name, e){    //事件对象e要放在最后
        e.preventDefault();
        alert(name);
    }
    
    render(){
        return (
            <div>
                <p>hello</p>
                {/* 通过 bind() 方法传递参数。 */}
                <a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
            </div>
        );
    }
}