React简单概览

学习React 一段时间了，现在总结下个人对React的认识。

什么是React

    React是Facebook推出的一个高效的javascript库，用于构建“可预期的”和“声明式的”Web用户界面，可以用来构建因数据不断变化的大型项目，React 本身只涉及UI层。

 

React的特点

     个人认为React有以下几个特点：

组件化

     React可构造多种类型的组件来管理数据状态，构建复杂的UI。

声明式

     声明性视图使代码更具可预测性，更易于调试。

响应式

      当state数据变化时，React自动响应变化更新视图。

虚拟DOM

     React通过构建 "Virtual DOM", 在经过事件循环后计算出虚拟DOM操作前后最小的 diff，再作用到真实的 DOM 上。由 Virtual DOM管理真实DOM的更新。 Vitrual DOM暂不细讲，其中虚拟DOM编译中的过程如下图：

 

 

 

 

当然，其他人可能认为还有其他的特点，其中虚拟DOM这个特性也不只是React存在，Vue中也有。

 

React的基本语法

1， html模板

    1.react中使用JSX语法，<script>标签中type属性设置成 text/babel。

    2.使用二个核心库react.js 、react-dom.js，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能。

 

2， ReactDOM.render

     ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

   ReactDOM.render(

      <h1>Hello, world!</h1>,

      document.getElementById('example')

   );

 

3、 JSX语法

   遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用JavaScript 规则解析。.

 

4， 组件component

     ES5语法用 React.createClass生成组件

    var HelloMessage = React.createClass({

  render: function() {

       return <h1>Hello {this.props.name}</h1>;

  }

    });

 

ES6中推荐使用extends React.Component 创建新的组件方式

class Greeting extends React.Component {}

    组件类的第一个字母必须大写，组件类只能包含一个顶层标签，否则也会报错。

 

5、 this.props.children

      this.props 对象的属性与组件的属性一一对应，但 this.props.children 属性它表示组件的所有子节点。this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。

      React 提供一个工具方法 React.Children 来处理 this.props.children 。可以React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。

 

6、 PropTypes 类型检查

 

• 组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求。

     var MyTitle = React.createClass({

         getDefaultProps : function () {

    return {

      title : 'Hello World'

    };

  },

   propTypes : {

     title:  React.PropTypes.string.isRequired,

  },

  render: function() {

       return <h1> {this.props.title} </h1>;

   }

});

其中，getDefaultProps设置组件的默认属性。

 

• 高版本react 类型检查管理在prop-types包内

import PropTypes from 'prop-types';

class Greeting extends React.Component {

 render() {

   return (

     <h1>Hello, {this.props.name}</h1>

   );

 }

}

//设置类型检查

Greeting.propTypes = {

 name: PropTypes.string

};

//设置默认值

Greeting.defaultProps = {

 name: 'Stranger'

};

 

具体见 https://reactjs.org/docs/typechecking-with-proptypes.html

 

7、 获取真实的DOM节点

    使用组件ref属性。html元素增加ref属性，this.refs.[refName]返回真实的DOM节点，获取时应注意是组件mounted之后。这点和Vue的类似。

 

8、 this.state

    将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI。

    getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。 每次修改以后，自动调用 this.render 方法，再次渲染组件。

 

9、 表单

   表单文本输入框的值不能通过this.props.value获取，而是 通过onChange事件的回调函数，通过event.target,value读取用户输入的值。input，textarea，select，radio元素。

 

10、 组件的生命周期

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

        Mounting：已插入真实 DOM

        Updating：正在被重新渲染

        Unmounting：已移出真实 DOM

 

React 为每个状态都提供了两种处理函数， will 函数在进入状态之前调用， did 函数在进入状态之后调用，三种状态共计五种处理函数。

1.     componentWillMount()：组件将要插入DOM前钩子函数
2.     componentDidMount()：组件插入DOM后的钩子函数
3.     componentWillUpdate(object nextProps, object nextState)：组件将要更新前钩子函数，其中nextProps是更新的参数，nextState是更新的状态
4.     componentDidUpdate(object prevProps, object prevState)：组件将要更新后钩子函数，其中nextProps是更新后的参数，nextState是更新后的状态
5.     componentWillUnmount()：组件卸载前的钩子函数

此外，React 还提供两种特殊状态的处理函数。

    componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用

    shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

 

参考文献

阮一峰React简单教程：http://www.ruanyifeng.com/blog/2015/03/react.html

React官网：https://reactjs.org/