React的特点

1：声明式设计-------采用声明规范，用ReactDOM.render()来声明

2：高效----采用虚拟DOM的模拟，最大限度的减少和真是DOM节点的交互

虚拟DOM：在内存里面创建一个虚拟的jsDOM对象，文档中一一查找节点，所有对DOM的操作都是对,对DOM处理的时候，不需要从虚拟DOM进行操作，对虚拟DOM进行增删改后再渲染到真是DOM上，能够提高性能。

3：灵活---使用库和框架

4:JSX-----React特有的特点，是JavaScript语法的扩展

jsx的特点：将js、html、css写在js文件里，然后使用babel进行解析.

在jsx里书写变量和表达式以及注释时需要使用“{}”单大括号进行包裹。

在jsx里面不能书写if-else语句，可以使用三目运算进行替换该功能

在jsx中可以使用数组，调用时数组会自动展开所有的元素。

5:组件---组件的数据流之间的传递是单向的，注意组件的首字母一定要大写，不然无法将内容显示在页面上，而且不会报错。

组件通过React.createClass()方法进行创建，如果我们需要向组件传递参数的时候，使用this.props对象进行值得传递

this.props.children-----表示组件的所有子节点

它的值有三种可能：

如果没有子节点------undefined

一个子节点------------object

两个以上的子节点---array

可以通过React.Children.map来遍历所有的子节点

复合组件的用法就是你想要用哪一个组件的功能就调用那一个组件的名称

语法

<div id="rect"></div>

<script type="text/babel">
    let NewComponent = React.createClass({
        render:function(){
            return <div>这是一个组件</div>
        }
    })


    ReactDom.render(
        <NewComponent/>,
        document.getElementById("rect")
    )    
</script>

6:单向响应的数据流----使用setState去更改数据的值，使用getInitialState设置值，用this.state来获取值

 

在React中，只更新组件的state，然后根据新的state重新渲染用户界面，不需要操作DOM节点。

定义初始化状态--------getInitialState()，这是一个对象，通过this.state来读取内容

修改状态值--------------this.setState()，这是 一个方法，使用该方法后每次修改值之后都会自动调用this.render方法，重新渲染组件，更新页面

<div id="rect"></div>
<script type="text/babel">
    var LikeBtn =  React.createClass({
        getInitialState:function(){
            return {liked:false}
        },
        btnClick:function(){
            this.setState({liked:!this.state.liked})
        },
        render:function(){
            var text = this.state.liked?"喜欢":"不喜欢";
            return (<p onClick={this.btnClick}>你<b>{text}</b>我);
        }
    })
    
    ReactDOM.render( 
        <LikeBtn />,
    document.getElementById("rect")   
    )
</script>

state和props的主要区别在于props是不可改变的，state是可以与用户进行交互，可以改变的

子组件只能通过props来传递数据

可以使用getDefaultProps()方法来设置props的默认值