React学习之路

Posted 放咩咩的星星

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>我

 

以上是关于React学习之路的主要内容,如果未能解决你的问题,请参考以下文章

react-学习之路3

react.js学习之路五

react.js学习之路一

react.js学习之路二

react.js学习之路六

《Python学习之路 -- Python基础之切片》