React.js梳理

阅读数：2580 发布时间：2016-05-18 22:58:08

作者：zzl005 标签： react react-dom 朱忠来005 react.js

React.createClass

React.createClass，创建 React 组件对应的类，描述你将要创建组件的各种行为，其中只有当组件被渲染时需要输出的内容的 render 方法是必须实现的，（该方法返回一棵 React 组件树，这棵树最终将会渲染成 HTML ），其他方法如 componentWillMount、componentDidMount 都是可选的：

var XYT_buttonTall = React.createClass({
    render: function(){
        return (
            <div style={XYTss.buttonTallWrap}>
                <button style={XYTss.buttonTall}>
                    预 约
                </button>
            </div>
            )
    }
})

注意：上面代码中的 <div> 标签不是真正的 DOM 节点；他们是 React div 组件的实例。你可以认为这些标签就是一些标记或者数据，只是 React 知道如何处理他们。

ReactDOM.render()

ReactDOM.render() 实例化根组件，启动框架，把标记注入到参数指定的原生的 DOM 元素中。

<body>
    <div id="example"></div>    //这里的 div 是实际 dom 节点
    <script type="text/babel">
      ReactDOM.render(
        <div>React</div>        //这里的 div 是 React div 组件实例，实际上，React 自己定义了好了大量的 Components，从 "div" 到 "svg"，包含了几乎所有 HTML Tags。
        document.getElementById('example')
      );
    </script>
</body>

ReactDOM 模块提供了一些 DOM 相关的方法，而 React 模块包含了 React 团队分享的不同平台上的核心工具（例如， React Native ）。

实际上，在 React 0.14 版中，React-dom 才被单独抽离出来，现在分为 React 和 React-dom 两个package，原来的 React.render 现在划归到了 React-dom 下面，成了 ReactDOM.render。

使用属性（ props ）传值

注意：下面的传值理解中，父子组件的说法，其实不太准确，本质上是组件类获取组件属性值的过程。

有时候，我们构建组件时，需要依赖父组件传入的数据xxx=???，这些从父组件传入的数据会做为子组件的 属性（ property ），而这些属性（ properties ），子组件可以通过 this.props.xxx 访问到。具体来看下面两段代码：

//子组件 XYT_nameL1.js，是一个标题组件，里面通过 this.props.title 获取父组件传入的数据。
var React = require('react');

var XYT_nameL1 = React.createClass({
    render(){
        return (
            <div >
                {this.props.title}
            </div>

        );
    }
});
module.exports = XYT_nameL1;

//父组件 Main.jsx 中的一部分代码，通过，title = '请选择挂号医院：',把数据传给了子组件 XYT_nameL1
var Main = React.createClass({
    render(){
        return (
            <div>
                <XYT_nameL1 title='请选择挂号医院：' />
           </div>
        );
    }
});

React 父子组件通过 this.props传值示意图 React传值

this.props.children属性

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

组件

这个概念，在接触到 React 的初始阶段，就应该接触到，但是，我觉的可以稍微放一放，熟悉了 React 的整体面貌之后，再来看这个概念，可能更容易理解点。以阮一峰的React 入门实例教程这段作为示例，具体来说一说：

首先是：组件和组件类的区分

组件类：通过 var Xxx = React.createClass 出来的的 Xxx是组件类，描述了你将要创建组件的各种行为，例如var HelloMessage = React.createClass({});就是一个叫HelloMessage 的组件类，组件类中定义了各种方法，必不可少的是 render 方法，该方法返回一棵 React 组件树，这棵树最终将会渲染成 HTML
组件：形如 <Xxx /> 是组件类的实例，例如<HelloMessage />，就是上面HelloMessage 的组件类的实例。组件类似于原生 HTML 标签，可以添加任意属性。如添加了 name 属性的<HelloMessage name="John">

组件的介绍

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类

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

ReactDOM.render(
组件类HelloMessage的实例
  <HelloMessage name="John" />,
  document.getElementById('example')
);

上面代码中，变量 HelloMessage 就是一个组件类。插入 <HelloMessage /> 时，会自动生成 HelloMessage 的一个实例（下文的"组件"都指组件类的实例）。所有组件类都必须有自己的 render 方法，用于输出组件。。组件类的第一个字母必须大写，并且只能包含一个顶层标签，否则会报错。

组件的属性：组件(形式为<Xxxx />)的用法与原生的 HTML 标签（如<h1>Hello</h1>）完全一致，可以任意加入属性，比如 <HelloMessage name="John"> ，就是 HelloMessage 组件加入一个 name 属性。组件的属性可以在组件类的 this.props 对象上获取。
组件属性的默认值设定：getDefaultProps 方法。
1.该方法在组件类创建的时候调用一次，然后返回值被缓存下来。如果父组件没有指定 props 中的某个键，则此处返回的对象中的相应属性将会合并到 this.props。
2.该方法在任何实例创建之前调用，因此不能依赖于 this.props。另外，getDefaultProps() 返回的任何复杂对象将会在实例间共享，而不是每个实例拥有一份拷贝。

组件的状态

组件的状态改变，会触发重新渲染。

组件状态的初始化：getInitialState方法（可以没有），方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取：

var Department = React.createClass({
    //设定组件的初始状态
    getInitialState() {
        var departmentArr = [];
        departmentArr.push({
            name:'耳鼻喉科',
            id: 1,
            direction: 'doctorSelect'
        });
        departmentArr.push({
            name:'妇产科',
            id: 2,
            direction: 'doctorSelect'
        });
        departmentArr.push({
            name:'精神科',
            id: 3,
            direction: 'doctorSelect'
        });
        return {
            data: departmentArr
        };
    },

    render(){
    //通过 this.state 读取初始状态对象的 data 数据
        var items = this.state.data.map(function (item) {
          return (
            <XYT_item name={item.name} direction={item.direction} id={item.id}/>
            );
        });
        return (
            <div style={XYTss.wrap}>
                <XYT_nameL1 title='请选择挂号科室：' />
                {items}
            </div>
        );
    }
});

设定组件状态：this.setState 方法修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

组件的生命周期方法

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

其中 Mouting 和 Updating 又分为 Will 和 Did 两种状态，所以共有5种生命周期：

componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()

在特定的生命周期里，通常会执行不同的方法。

挂载前： componentWillMount
在初始化渲染执行之前立刻调用，服务器端和客户端都只调用一次。如果在这个方法内调用 setState，render() 将会感知到更新后的 state，将会执行仅一次，尽管 state 改变了。

componentWillMount:function() {
     var doctorArr = [];
        doctorArr.push({
            name:'waiting',
            id: 1,
            docName:'.....',
            num: '.....',
            goodAt: '.....',
            src: ''
        });

     this.setState({data: doctorArr});
},

挂载后： componentDidMount

在初始化渲染执行之后立刻调用一次，仅客户端有效（服务器端不会调用，如果想和其它 JavaScript 框架集成，使用 setTimeout 或者 setInterval 来设置定时器，或者发送 AJAX 请求，通过 fetch 获取后端数据等操作，可以在该方法中执行这些操作。

componentDidMount:function(){
    //在DidMount中，通过 fetch 获取后端数据
    fetch('http://192.168.0.104:8085/php/1.php?params=doc')
    .then((response) => response.text())
    .then((responseText) => {
        this.setState({data: JSON.parse(responseText)});
    })
    .catch((error) => {
      console.warn(error);
    });

},