React.js梳理

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

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

React.createClass

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

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 才被单独抽离出来,现在分为 ReactReact-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属性
  1. this.props 对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children 属性。它表示组件的所有子节点。
  2. this.props.children 的值有三种可能:
    如果当前组件没有子节点,它就是 undefined ;
    如果有一个子节点,数据类型是 object ;
    如果有多个子节点,数据类型就是 array 。

组件

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

首先是:组件和组件类的区分
  1. 组件类:通过 var Xxx = React.createClass 出来的的 Xxx是组件类,描述了你将要创建组件的各种行为,例如var HelloMessage = React.createClass({});就是一个 叫HelloMessage 的组件类,组件类中定义了各种方法,必不可少的是 render 方法,该方法返回一棵 React 组件树,这棵树最终将会渲染成 HTML
  2. 组件:形如 <Xxx /> 是组件类的实例,例如<HelloMessage />,就是上面HelloMessage 的组件类的实例。组件类似于 原生 HTML 标签,可以添加任意属性。如添加了 name 属性的<HelloMessage name="John">
组件的介绍
//组件类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 方法,用于输出组件。组件类的第一个字母必须大写,并且只能包含一个顶层标签,否则会报错。

组件的状态

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

组件状态的初始化: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 方法,再次渲染组件。

组件的生命周期方法

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

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

挂载前: 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);
    });

},

路由--ReactRouter

相关文章推荐: