初入React世界

一: React简单介绍

        React 专注于视图层,和Angular等框架不同,React并不是完整的MVC/MVVM框架,它专注于提供清晰的简洁的View(视图)层解决方案。使用的主要语法是JSX。

二 : JSX语法的由来

  个人的理解:就是HTMl和JavaScript语法一块使用。

  1. DOM元素

    Web页面是由一个个HTML元素嵌套组合而成的。当使用JavaScript来描述这些元素的时候,这些元素可以简单的被表示成纯粹的JSON对象。比如:现在需要藐视一个按钮(button),这些HTML语法表示非常简单:

    

<button class="btn btn-blue">
    <i>button</i>
</button>

    其中包括了元素的类型和属性。如果转换成JSON对象,那么依然包括元素的类型和属性:

    

{
    type : 'button',
    props : {
        className : 'btn btn-blue',
        children : {
             type : 'i',
             props : {
                  children : 'button'
             }
        }
    }  
}

    这样我们就可以在JavaScript中创建Virtual DOM元素了。

    在React 中,到处都是可以复用的元素,这些元素并不是真实的实例,它只是让 React告诉开发者想要在屏幕上显示什么。我们无法通过方法去调用这些元素,它们只是不可变的描述对象。

  2. 组件元素

    我们可以方便的封装上述button元素,得到一种构建按钮的公共方法:(ES^的语法)

    

const Button => ({color ,text }) {
    return {
        type : 'button',
        props : {
             className : 'btn btn-${color}',
             children : {
                   type : 'i',
                   props : {
                        children : text
                   }
             }
        }
    }
}    

    当我们要生成DOM元素中具体的按钮时,就可以方便的调用Button(‘blue’,'button')。 

三: React组件的构建

  React组件即为组件元素。组件元素被描述成纯粹的JSON对象,意味着可以使用方法或是类来构建。React组件基本上由3个部分组成-----属性(props)、状态(state)以及生命周期方法。

  React组件可以接收参数,也有自身状态。一旦接收到的参数或者自身状态有所改变,React组件就会执行相应的生命周期方法,最后渲染。整个过程完全符合传统组件所定义的组件职责。

  React组件基本上由组件的构建方式、组件内的属性状态与生命周期方法组成。(主要介绍用React.createClass方法来构建组件)

  React.createClass

  用React.createClass 构建组件是React最传统的、也是兼容性最好的方法。

  

const Button = React.createClass({
    getDefaultProps(){
        return {
            color : 'blue',
            text : 'button'
        };
    },
    render() {
        const {color ,text } = this.props;
        return {
            <button className = {'btn btn-${color}'}>
                <i>{text}</i>
            </button>
        };
    }
});

  从表象上看,React.createClass 方法就是构建一个组件对象。当另一个组件需要调用Button组件时,只用写成<Button />,就可以解析成React.createElement(Button)方法来创建Button实例,这意味着一个应用中调用几次Button,就会创建几次Button 实例。

posted @ 2017-12-26 22:53  Jennry  阅读(173)  评论(0编辑  收藏  举报