React.js基础手册

2018-08-05 本文已影响92人鱼鱼吃猫猫

React简介

（1）简介

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

React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

（2）特点

声明式设计 −React采用声明范式，可以轻松描述应用。
高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。Virtual DOM
灵活 −React可以与已知的库或框架很好地配合。
JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

（3）相关js库

react.js: React的核心库
react-dom.js: 提供操作DOM的扩展库
babel.min.js: 解析JSX语法代码转为纯JS语法代码的库

React安装

1、下载

React可以直接下载使用，下载官网 http://facebook.github.io/react/

2、安装

（a）通过npm使用React

操作系统需要支持Node.js，建议在React中使用CommonJS模块系统，比如browserify 或 webpack，本教程使用 webpack。

国内使用npm速度较慢，使用淘宝定制的cnpm（gzip压缩支持）命令行工具代替默认的npm：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org

（b）使用create-react-app快速构建开发环境

create-react-app来自于Facebook，通过该命令无需配置就能快速构建React开发环境。

create-react-app自动创建的项目是基于Webpack+ES6。

推荐在C盘以外的盘符创建一个空文件夹，比如定义：ggReact ，然后通过cmd小黑窗定位到我们新建的ggReact文件夹再开始 npm 等一系列操作,操作步骤大概如下：

$ cnpm install -g create-react-app  
$ create-react-app my-app   /*创建项目*/
$ cd my-app/    /*进入项目目录*/
$ npm start     /*启动项目*/

createReact01.png

createReact02.png

createReact03.png

在浏览器中打开http://localhost:3000/ ,显示结果如下：

firstResult.png

React第一个项目

1、React项目目录结构

项目结构.png

（1）node_modules：这里面包含了react项目中会用到的一些组件，install的时候下载下来的，你可以进去看看，有一些如base64之类的我们可能会用到的组件；

（2）public：里面包含了我们项目中的启动页面，react比较适合单页面项目应用开发，所以暂时只包含一个index.html，并且这也是react工程的入口页面，入口页面怎么理解，就是你启动项目后，打开的首页，第一眼呈现的那个页面；

（3）src：里面包含了一些我们自己使用的js文件，css文件，img文件等等，但你打开src文件夹你会发现很混乱，不要管什么app.js，你就看到index.js即可，系统默认将index.html对准了index.js，index.js也就是我们的入口js，他和index.html所对应。

2、让目录结构更易懂

接下来，我们改动一下src里面的内容和结构，让首次接触react的小伙伴尽量能觉得他有点亲切的感觉，事实证明，越亲切的事物我们越希望去接近。

src文件夹内容修改如图：

项目结构1.png

src文件夹下原来的所有东西，除了index.js之外，都可以删掉，这样就可以轻装上阵了

接下来，我们做一些代码修改，展示一个含有样式的hello world示例。

看public下的index.html，我们还是保留最简洁，最易懂的部分，如图：

项目结构2.png

再来看src下的index.js，我们依然保留最简约的部分，如图：

项目结构3.png

接下来我们为这个demo添加样式，还是那条原则，尽量少写行内样式，写自己的css文件。这个时候我们在 src文件夹下的css文件夹下创建demo.css，写入css样式如图：

项目结构4.png

在index.js文件中使用import关键字引入demo.css，如图：

项目结构5.png

看一眼我们的成果，如图：

项目结构6.png

React JSX

1、JSX介绍

全称: JavaScript XML， React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

作用: 用来创建react虚拟DOM(元素)对象
- var ele = <h1>Hello JSX!</h1>;
- 注意1: 它不是字符串, 也不是HTML/XML标签
- 注意2: 它最终产生的就是一个JS对象
标签名任意: HTML标签或其它标签
标签属性任意: HTML标签属性或其它
基本语法规则
- 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
- 遇到以 { 开头的代码，以JS的语法解析: 标签中的js代码必须用{ }包含
babel.js的作用
- 浏览器的js引擎是不能直接解析JSX语法代码的, 需要babel转译为纯JS的代码才能运行
- 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

2、使用 JSX

JSX 看起来类似 HTML ，我们可以看以下实例:

html文件：

  <body>
    <div id="root"></div>
  </body>

js文件：

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

注意：代码中能够嵌套多个 HTML 标签，但需要使用一个标签元素包裹它

错误例子：

ReactDOM.render(
  <h1>这是错误的例子</h1>
  <span>假设这里是标题下面的内容</span>,
  document.getElementById("example")
);

正确例子：

ReactDOM.render(
  <section>
    <h1>这是正确的例子</h1>
    <span>假设这里是标题下面的内容</span>
  </section>,
  document.getElementById("example")
);

3、独立文件

如果需要使用公共样式，可以将React JSX 代码可以放在一个独立文件上，并在不同的js文件中引入即可，如下：

AppTop.js文件中：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import '../css/demo.css';

//类定义
class AppTop extends Component {
    render() {
        return (
            <header>
                <h1>我是公共标题栏</h1>
            </header>
        );
    }
}

export default AppTop; //将自定义的DOM元素暴露出来，供给其他的页面使用

index.js文件中：

import React from 'react';
import ReactDOM from 'react-dom';
import AppTop from './js/AppTop.js';

ReactDOM.render(
    <AppTop />, 
    document.getElementById('root')
);

4、JavaScript 表达式

我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下：

ReactDOM.render(
    <div>
      <h1>{1+1}</h1>
    </div>,
    document.getElementById('example')
);

在 JSX 中不能使用 if else 语句，但可以使用 三元运算 表达式来替代。

var i = 0;
ReactDOM.render(
    <div>
      <h1>{i == 1 ? 'True!' : 'False'}</h1>
    </div>,
    document.getElementById('example')
);

5、样式

React 推荐使用内联样式。React 会在指定元素数字后自动添加 px 。

var myStyle = {
    fontSize: 100,  //等价于fontSize: '100px',
    color: '#00ff00'
};
ReactDOM.render(
    <h1 style = {myStyle}>我是标题</h1>,
    document.getElementById('example')
);

6、注释

注释需要写在花括号中，需要注意的是：

在标签内部的注释需要花括号
在标签外的的注释不能使用花括号

ReactDOM.render(
    /*标签外部的注释 */
    <h1>我是标题 {/*标签内部的注释*/}</h1>,
    document.getElementById('example')
);

7、数组

JSX 允许在模板中插入数组，数组会自动展开所有成员

var arr = [
  <h1>HTML</h1>,
  <h2>CSS</h2>
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

8、HTML 标签 vs React 组件

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。React JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。

要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。

var my = <h1>我是标题呀</h1>;
ReactDOM.render(my, document.getElementById('example'));

要渲染 React 组件，只需创建一个大写字母开头的本地变量。(大驼峰法)

class My extends React.Component {
    render() {
        return (<h1>标题1</h1>);
    }
}

ReactDOM.render(<My />, document.getElementById('example'));

//var my = <My />;
//ReactDOM.render(my, document.getElementById('example'));

React 组件

React.js 中一切皆组件，用 React.js 写的其实就是 React.js 组件。

我们在编写 React.js 组件的时候，一般都需要继承 React.js 的 Component（类定义）。一个组件类必须要实现一个 render 方法，这个 render 方法必须要返回一个 JSX 元素。但这里要注意的是，必须要用一个外层的 JSX 元素把所有内容包裹起来。返回并列多个 JSX 元素是不合法的。

1、定义单个组件

（1）定义组件

方式1：通过React自定义组件（DOM元素）：类定义

class MyApp extends React.Component {
    render() {
        return (
            <div>
                <h2>这是标题2</h2>
                <h3>这是标题2</h3>
            </div>
        );
    }
}
export default MyApp;

方式2：通过React自定义组件（DOM元素）：函数定义

const MyApp = () => <div><p>这是一个段落</p></div>;
export default MyApp;

方式3：React.createClass创建组件的方式在react 16版本中去除，所以不建议使用。

var MyApp = React.createClass({
  render: function() {
    return <h1>Hello World！</h1>;
  }
});

（2）使用组件

import React from 'react';
import ReactDOM from 'react-dom';
import MyApp from './js/MyApp.js'; //导入自定义组件

ReactDOM.render(<MyApp />, document.getElementById('root'));

2、定义复合组件

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

import React from 'react';
import ReactDOM from 'react-dom';

class WebSite extends React.Component {
    render() {
        return (
            <div>
                <Name name={this.props.name} />
                <Link site={this.props.site} />
            </div>
        );
    }
}
class Name extends React.Component {
    render() {
        return (
            <h1>{this.props.name}</h1>
        );
    }
}
class Link extends React.Component {
    render() {
        return (
            <h1>{this.props.site}</h1>
        );
    }
}

ReactDOM.render(
    <WebSite name="百度一下，你就知道" site='http://www.baidu.com' />, 
    document.getElementById('root')
)

React Props

React中的每一个组件，都包含有一个属性（props），属性主要是从父组件传递给子组件的，在组件内部，我们可以通过this.props获取属性对象。

1、定义和使用props

（1）在render方法中调用组件时使用key/value的形式来指定属性。

（2）在自定义组件中通过this.props.key来获得组件属性的值，需要使用{}括起来。

class MyApp extends React.Component {
    render() {
        return (<p>{this.props.name}</p>);
    }
}

ReactDOM.render(
    <MyApp name="张三" />, 
    document.getElementById('root')
);

2、默认Props

在react中可以定义默认props，使用es5时，可以使用getDefaultProps：

var MyApp = React.createClass({
  getDefaultProps: function() {
    return {
      name: 'demo'
    };
  },
  render: function() {
    return <h1>This is my {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <MyApp />,
  document.getElementById('demo')
);

es6中使用static defaultProps

class MyApp extends React.Component {
    //如果babel设置为es6的转码方式，会报错，因为定义静态属性不属于es6，而在es7的草案中。ES6的class中只有静态方法，没有静态属性。
    static defaultProps = {
        name: 'demo'
    }
    render() {
        return <p>this is my {this.props.name}</p>
    }   
}

ReactDOM.render(
    <MyApp />,
    document.getElementById('root')
);

es6定义默认props的正确方式：

class MyApp extends React.Component {
    render() {
        return <p>this is my {this.props.name}</p>
    }   
}
//由于是用ES6 class语法创建组件，其内部只允许定义方法，而不能定义属性，class的属性只能定义在class之外。所以defaultProps要写在组件外部。
MyApp.defaultProps = {
    name: 'xxx'
};

ReactDOM.render(
    <MyApp />,
    document.getElementById('root')
);

3、使用JSX延展属性为组件指定属性

（1）定义一个this.props对象，在对象中声明多个键值对，用于表示组件的属性

（2）在组件中使用{...this.props}的方式传递属性。“...”表示JSX的延展操作符，这种方式可以很方便的为组件指定多个属性。

class MyApp extends React.Component {
    render() {
        return(
            <h1>{this.props.name} : {this.props.age} : {this.props.sex}</h1>
        );
    }
}
MyApp.props = {
    name: '张三', 
    age: 18,
    sex: '男'
};

ReactDOM.render(
    //<MyApp name='张三' age='18' sex='男' />
    <MyApp {...MyApp.props}/>,
    document.getElementById('root')
);

4、Props验证

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

var title = 'abc';
// var title = 123;
class MyApp extends React.Component {
    propTypes: {
        title: React.PropTypes.string.isRequired
    }
    render() {
        return (<h1>{this.props.title}</h1>);
    }
}

ReactDOM.render(
    <MyApp title={title}/>, 
    document.getElementById('root')
);

从 React v15.5 开始，React.PropTypes 助手函数已被弃用，我们建议使用 prop-types库来定义PropTypes。

import PropTypes from 'prop-types';

class MyApp extends React.Component {
    render() {
        return (
            <h1>{this.props.name}</h1>
        );
    }
}
MyApp.propTypes = {
    name: PropTypes.string
}

ReactDOM.render(
    <MyApp name='123'/>,
    document.getElementById('root')
)

更多的验证器如下：

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

React State

React 的核心思想是组件化的思想，应用由组件搭建而成，而组件中最重要的概念是State（状态），State是一个组件的UI数据模型，是组件渲染时的数据依据。

1、如何定义State

定义一个合适的State，是正确创建组件的第一步。State必须能代表一个组件UI呈现的完整状态集，即组件的任何UI改变，都可以从State的变化中反映出来；同时，State还必须是代表一个组件UI呈现的最小状态集，即State中的所有状态都是用于反映组件UI的变化，没有任何多余的状态，也不需要通过其他状态计算而来的中间状态。

组件中用到的一个变量是不是应该作为组件State，可以通过下面的4条依据进行判断：

这个变量是否是通过Props从父组件中获取？如果是，那么它不是一个状态。
这个变量是否在组件的整个生命周期中都保持不变？如果是，那么它不是一个状态。
这个变量是否可以通过其他状态（State）或者属性(Props)计算得到？如果是，那么它不是一个状态。
这个变量是否在组件的render方法中使用？如果不是，那么它不是一个状态。这种情况下，这个变量更适合定义为组件的一个普通属性。

请务必牢记，并不是组件中用到的所有变量都是组件的状态！当存在多个组件共同依赖一个状态时，一般的做法是状态上移，将这个状态放到这几个组件的公共父组件中

class LikeButton extends React.Component {
    //声明一个状态liked   使用this.state.liked获取状态的值
    getInitialState() {
        return {liked: false};
    }   
    handleClick(event) {
        this.setState({liked: !this.state.liked});
    }
    render() {
        return (
            <button onClick={this.handleClick}>
                你<strong>{this.state.liked ? '喜欢' : '不喜欢'}</strong>我，点我切换
            </button>
        )
    }
}

ReactDOM.render(
    <LikeButton />,
    document.getElementById('root')
)

注意：React在ES6的实现中去掉了getInitialState这个hook函数，规定state在constructor中实现

正确定义State的方式如下：

（1）在constructor中实现state

（2）通过bind绑定函数

（3）在函数内部使用setState函数更改状态

（4）在组件中使用该状态

//定义组件
class LikeButton extends React.Component {
    //constructor表示构造器，在constructor需要声明状态state，在声明state之前需要使用super(props);
    constructor(props) {
        super(props);//使用父类的属性
        
        //声明状态
        this.state={
            liked: false
        }
        //Currently, you are calling bind. 
        //But bind returns a bound function. 
        //You need to set the function to its bound value.
        //目前，你正在调用绑定。但是绑定返回绑定函数。您需要将函数设置为其绑定值。
        this.handleClick = this.handleClick.bind(this);
    }
    
    handleClick(event) {
        this.setState({liked: !this.state.liked});
    }
    
    render() {
        return (
            <button onClick={this.handleClick}>
                你<strong>{this.state.liked ? '喜欢' : '不喜欢'}</strong>我，点我切换
            </button>
        )
    }
}

ReactDOM.render(
    <LikeButton />,
    document.getElementById('root')
)

2、setState设置状态

（1）语法： setState(object nextState[, function callback])

（2）说明：

setState是React事件处理函数中和回调函数中触发UI更新的主要方法。
不能再组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。
setState()不一定是同步的，为了性能提升，React会批量执行state和DOM渲染。
setState()总是会触发一次组件重绘，但可在shouldComponentUpdate()中实现一些条件渲染逻辑来解决。

class MyApp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            clickCount: 0
        };

        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(event) {
        this.setState({clickCount: this.state.clickCount + 1});
    }

    render() {
        return (
            <h2 onClick={this.handleClick}>
                点击后次数变更： {this.state.clickCount}
            </h2>
        );
    }
}

ReactDOM.render(
    <MyApp />,
    document.getElementById('root')
);

设置多个状态时，需要在setState函数的第二个参数传递一个function回调函数，如下：

class MyApp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            clickCount: 0, 
            isRed: false,
            smallFont: true
        };

        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(event) {
        this.setState(
            {clickCount: this.state.clickCount + 1},
            function() {
                this.setState(
                    {isRed: !this.state.isRed}, 
                    function() {
                        this.setState({smallFont: !this.state.smallFont});
                    }
                );
            }       
        );
        console.log(this.state.isred);
    }

    render() {
        var redStyle = {color: 'red', fontSize: 50};
        var blueStyle = {color: 'blue', fontSize: 14};
        return (
            <h2 onClick={this.handleClick} style={this.state.isRed ? redStyle : blueStyle}>
                点击后次数变更： {this.state.clickCount}
            </h2>
        );
    }
}

ReactDOM.render(
    <MyApp />,
    document.getElementById('root')
);

3、State 与 Props 区别

除了State, 组件的Props也是和组件的UI有关的。他们之间的主要区别是：

State是可变的，通过setState()函数来改变，是组件内部维护的一组用于反映组件UI变化的状态集合；
Props对于使用它的组件来说，是只读的，要想修改Props，只能通过该组件的父组件修改。在组件状态上移的场景中，父组件正是通过子组件的Props, 传递给子组件其所需要的状态。
通过属性将父组件的状态传递到子组件，那么父组件的状态发生变化时，子组件的属性也会改变
State定义在constructor内部，在super(props)代码后面；Props定义在类（组件）的外部

React组件生命周期

1、组件的生命周期的三个状态

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

2、生命周期的方法

componentWillMount ：在渲染前调用,在客户端也在服务端。
componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
componentWillReceiveProps :在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate :返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。
componentWillUpdate:在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate :在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount: 在组件从 DOM 中移除的时候立刻被调用。

class MyApp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            date: new Date()
        };
    }
    //通过componentDidMount 方法设置一个定时器，每隔1秒重新设置时间，并重新渲染：
    componentDidMount() {
        var oThis=this;
        clearInterval(this.timer);

        this.timer=setInterval(function() {
            oThis.setState({
                date: new Date()
            })
        }, 1000)
    }
    
    render(){
        return (
            <h2>{this.state.date.toLocaleTimeString()}</h2>
        );
    }
}

父组件的状态传递到子组件的属性中

class Content extends React.Component {
    //在渲染前调用,在客户端也在服务端
    componentWillMount() {
        console.log('Component WILL MOUNT!')
    }
    //在第一次渲染后调用，只在客户端
    componentDidMount() {
       console.log('Component DID MOUNT!')
    }
    //在组件接收到一个新的 prop (更新后)时被调用
    componentWillReceiveProps(newProps) {
        console.log('Component WILL RECEIVE PROPS!')
    }
    //在组件接收到新的props或者state时被调用
    shouldComponentUpdate(newProps, newState) {
        return true;
    }
    //在组件接收到新的props或者state但还没有render时被调用
    componentWillUpdate(nextProps, nextState) {
        console.log('Component WILL UPDATE!');
    }
    //在组件完成更新后立即调用
    componentDidUpdate(prevProps, prevState) {
        console.log('Component DID UPDATE!')
    }
    //在组件从 DOM 中移除的时候立刻被调用
    componentWillUnmount() {
         console.log('Component WILL UNMOUNT!')
    }
  
    render() {
        return (
            <div>
                <h3>{this.props.myNumber}</h3>
            </div>
        );
    }
}

class MyApp extends React.Component {
    constructor(props) {
        super(props);
        //声明状态
        this.state = {
            data: 0
        };
        
        this.setNewNumber = this.setNewNumber.bind(this);
    }
    
    setNewNumber() {
        this.setState({data: this.state.data + 1});
    }
    
    render() {
        return (
            <div>
                <button onClick={this.setNewNumber}>点我改变</button>
                <Content myNumber={this.state.data}></Content>
            </div>
        );
    }
}

ReactDOM.render(
    <div>
        <MyApp />
    </div>,
    document.getElementById('root')
);

风

React表单与事件

1、React表单组件

在HTML中，表单元素与其他元素最大的不同是它自带值或数据，而且在我们的应用中，只要是有表单出现的地方，就会有用户输入，就会有表单事件触发，就会涉及的数据处理。

在我们用React开发应用时，为了更好地管理应用中的数据，响应用户的输入，编写组件的时候呢，我们就会运用到受控组件与非受控组件这两个概念。

React推荐我们在绝大多数情况下都使用受控组件。这样可以保证表单的数据在组件的state管理之下，而不是各自独立保有各自的数据。

（1）React中的表单组件大致可分为两类：

受控组件：一般涉及到表单元素时我们才会使用这种分类方法。受控组件的值由props或state传入，用户在元素上交互或输入内容会引起应用state的改变。在state改变之后重新渲染组件，我们才能在页面中看到元素中值的变化，假如组件没有绑定事件处理函数改变state，用户的输入是不会起到任何效果的，这也就是“受控”的含义所在。
非受控组件：类似于传统的DOM表单控件，用户输入不会直接引起应用state的变化，我们也不会直接为非受控组件传入值。想要获取非受控组件，我们需要使用一个特殊的ref属性，同样也可以使用defaultValue属性来为其指定一次性的默认值。

简单来说，受控组件就是它的值由React进行管理，通过props或state来绑定数据，而非受控组件的值则由原生DOM进行管理。示例如下：

//受控组件(省略部分代码)
<input type='text' value={this.state.value} onChange={this.handleChange}/>

handleChange(event) {
    this.setState({value: event.target.value});
}


//非受控组件
<input type="text" defaultValue="hello!"/>

（2）表单组件

我们在组件中声明表单元素时，一般都要为表单元素传入应用状态中的值，可以通过state也可以通过props传递，之后需要为其绑定相关事件，例如表单提交，输入改变等。在相关事件触发的处理函数中，我们需要根据表单元素中用户的输入，对应用数据进行相应的操作和改变。

class MyApp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 'hello'
        };
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        this.setState({value: event.target.value});
    }

    render() {
        return (
            <div>
                <input type='text' value={this.state.value} onChange={this.handleChange}/>
                <h2>{this.state.value}</h2>
            </div>
        );
    }
}

ReactDOM.render(
    <MyApp />,
    document.getElementById('root')
);

（3）在子组件上使用表单：更新prop

//子组件
class Son extends React.Component {
 render() {
    return(
        <div>
            <input type='text' value={this.props.myData} onChange={this.props.updateState}/>
            <h2>{this.props.myData}</h2>
        </div>
    );
 }
}

//父组件
class Father extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: 'hello'
        };
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        this.setState({data: event.target.value});
    }

    render() {
        return (
            <div>
                <Son myData={this.state.data} updateState={this.handleChange}/>
            </div>
        );
    }
}

2、React事件

React对原生的事件系统也进行了封装，在React中的事件对象实际上是一个跨浏览器的虚拟事件对象 ，它拥有和原生事件对象相同的属性和方法。

使用React元素处理事件与处理DOM元素上的事件非常相似。不过有一些语法上的差异：

React事件使用小驼峰命名法（从第二个单词开始每个首字母大写）。自定义组件时使用大驼峰命名法（每个单词首字母大写）
React事件使用JSX传递一个函数作为事件处理程序，而不是一个字符串。

示例：

//HTML
<button onclick="changeData()"> 点击改变 </button>

//React
<button onClick={changeData}> 点击改变 </button>

（1）事件处理函数

鼠标事件：onClick onDoubleClick onMouseDown
触摸事件：onTouchStart onTouchMove onTouchEnd
键盘事件：onKeyDown
剪切事件：onCopy onCut onPaste
表单事件：onChange onInput onSubmit
焦点事件：onFocus
UI事件：onScroll
滚动事件：onWheel

（2）onClick事件来修改数据

class ClickEvent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 'hello world'
        };
        this.changeData = this.changeData.bind(this);
    }

    changeData(event) {
        this.setState({value: '萨瓦迪卡'});
    }

    render() {
        return (
            <div>
                <button onClick={this.changeData}>点击改变</button>
                <h2>{this.state.value}</h2>
            </div>
        );
    }
}

（3）在子组件上响应事件：更新prop

//子组件
class Site extends React.Component {
    render() {
        return (
            <div>
                <button onClick={this.props.updateState}>点击改变</button>
                <h2>{this.props.myData}</h2>
            </div>
        );
    }
}

//父组件
class Content extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 'hello'
        };
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        this.setState({value: '你好'});
    }

    render() {
        return(
            <div>
                <Site myData={this.state.value} updateState={this.handleChange}/>
            </div>
        );
    }
}

3、React Refs

组件并不是真实的DOM节点，而是存在于内存之中的一种数据结构，叫做虚拟DOM（virtual DOM）。只有当组件插入文档之后，才会变成真实的DOM。根据React的设计，所有的DOM变动，都先在虚拟DOM上发生，然后再将实际发生变动的部分反映在真实DOM上，这种算法叫做DOM diff，它可以极大提高网页的性能表现。

当需要从组件获取真实DOM的节点时，就需要用到一种非常特殊的属性Ref，可以用来绑定到render()输出的任何组件上。这个特殊的属性允许开发者引用render()返回的相应的支撑实例（backing instance），这样就可以确保在任何时间总是拿到正确的实例。使用this.refs.[refName]来获取节点

组件支撑实例是React在其文档的各处可引用的真实DOM节点。

class RefContent extends React.Component {
    constructor(props) {
        super(props);

        this.getFocus = this.getFocus.bind(this);
    }

    getFocus() {
      // 使用原生的DOM API获取焦点
        this.refs.myInput.focus();
    }

    render() {
      // 当组件插入到DOM后，ref属性添加一个组件的引用到`this.refs`
        return(
            <div>
                <input type='text' ref='myInput' />
                <button onClick={this.getFocus}>点击按钮获取焦点</button>
            </div>
        );
    }
}

注意：ref从一定程度上增加了组件之间的耦合性，导致难以分离，所以如果可以用props来处理的事情，尽量不要用ref来处理

值得在 2018 年尝试的 11 个 React 组件库：https://blog.csdn.net/snsHL9db69ccu1aIKl9r/article/details/79454984

React组件库：https://blog.csdn.net/mjzhang1993/article/details/56666607

React全家桶：https://blog.csdn.net/awaw00/article/category/6692955

组件库SaltUI： https://github.com/salt-ui/saltui