React学习之路（一）

React

React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式

高性能：复杂或频繁的DOM操作通常是性能瓶颈的原因，为此引入了虚拟DOM

虚拟DOM：每当数据变化时，React会重新构建DOM树

使用React大大降低了逻辑复杂性，意味着开发难度降低，产生bug更少

React衍生品：React native  是React衍生出的一套框架

React的特点和优势

1.虚拟DOM

2.jsx

3.单向数据流

4.组件化开发、高效率

组件：同时包含html、css、js、images元素的聚合体

react.js中有React对象，帮助我们创建组件等功能

react-dom.js中有ReactDOM对象，渲染组件的虚拟dom为真实的dom

jsx编译方法：1.浏览器端编译，通过引入browser、babel对script内的代码编译      2.利用webpack等开发环境进行编译，将编译好的文件引入

render函数和vue组件里的render完全一样，在vue组件中可以不用编写render函数，这个时候可以使用template模板来编写组件的虚拟don结构，然后vue组件会自动将模板compile成虚拟dom结构放入render中执行，但是React中需要编写render函数

组件通过React.createClass创建（es5），在es6中直接通过class关键字创建

组件就是一个构造器，每次使用组件都相当于在实例化组件

React的组件必须使用render函数来创建组件的虚拟dom结构

组件使用ReactDOM.render方法将其挂载在某一个节点

组件的首字母必须大写

jsx是一种语法，全称：javascript xml

即使使用了jsx语法之后，也是需要将其变编译成原生的createElement

组件dom添加样式

在React里的表达式的符号是‘{}’，作用和vue的表达式作用是一样的

想给虚拟dom添加行内样式，需要使用表达式传入样式对象的方式来实现

行内样式需要写入一个样式对象，而这个样式对象的位置可以放在很多地方，例如React.createClass的配置项中、render函数里、组件原型上、外链js文件中

React推荐我们使用行内演示，因为React觉得每一个组件都是一个独立的整体（反正不这么写，是不是傻）

大多数情况下还是为元素添加类名、id以使用某些样式，注意添加class类名时，因为class是关键字，所以写成className

在React中，给组件的dom添加事件的时候，也是在行内添加的方式，事件名字需要写成小驼峰的方式，值利用表达式传入一个函数即可

注意：在没有渲染dom时，页面没有真实dom，获取不到dom

组件嵌套

将一个组件渲染到某一个节点里的时候，会将这个节点里原有内容覆盖

组件嵌套的方式就是将子组件写入到父组件的模板中，且React

注意：React中的注释要写成{/**/}

React中的数据承载（Props/State）

React也是基于数据驱动的框架，组件中必然需要承载一些数据，在React中起到这个作用的是属性和状态（props & state）

1. 属性（props） 在组件外部传入，或者内部设置，组件内部通过this.props获得

2. 状态（state） 在组件内部设置或者更改，组件内部通过this.state获得

属性（props）

属性一般是外部传入的，组件内部也可以通过一些方式初始化的设置，属性不能被组件自己更改

属性时描述性质、特点的、组件自己不能随意更改

使组件拥有属性的方式：

1. 在装载组件的给组件传入

传入数据的时候，除了字符串类型，其他的都该报上表达式，但为了规范，所有的数据传递最好都包上{}

var Gouzi = React.createClass({

    render(){

        console.log(this)

        return (

            <div>

                <p>我的名字：{this.props.name}</p>

                <p>我的性别：{this.props.sex}</p>

                <p>我的年龄：{this.props.age}</p> 

                <p>我的父亲是：{this.props.father}</p>                                             

            </div>

        )

    }

})

 

let info = {

    sex:'male',

    father:'狗爸'

}

 

ReactDOM.render(<Gouzi {...info} name={"大狗子"} age={26}/>,app)

2.父组件给子组件传入

父组件在嵌套组件的时候为子组件传入，传入的方式和上面的方式一样

//父组件的render函数

render(){

    return (

        <div>

            <p>父组件：</p>

            <hr/>

            <Son name={'大狗子'}/>

            <Son name={'二狗子'}/>

        </div>

    )

}

3. 子组件自己设置

子组件通过getDefalutProps来设置默认的属性

getDefaultProps的值是函数，这个函数会返回一个对象，我们在这里对象里为组件设置默认属性

这种方式设置的属性优先级低，会被外部传入的属性值覆盖

getDefaultProps:function () {

    console.log('getDefaultProps')

    return {

        name:'狗爸',

        sonname:'二狗子'

    }

},

//render

<p>我