初入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 实例。

原文地址：https://www.cnblogs.com/maxiaodan/p/8120446.html