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>我