react教程(一)——react优势以及组件、state、props介绍

最新推荐文章于 2024-08-02 09:52:36 发布

mapbar_front

最新推荐文章于 2024-08-02 09:52:36 发布

阅读量1.2k

点赞数 4

本文链接：https://blog.csdn.net/mapbar_front/article/details/79528644

版权

1、react是什么？它的优势在哪？
react是在前端的单页面应用领域中，处于领导地位！它使用虚拟DOM和组件化开发的方式，重新定义了前端开发的方式。

如果说react的优势在哪？我认为是这两点！

第一点、虚拟DOM。
虚拟DOM的方式，能够极大的提高react项目的性能问题！

那浏览器的性能瓶颈在哪呢？react是这么认为的，大量的数据交互、事件、动画让一个项目的界面渲染变得极有压力，react的聪明之处在于，它自己只定义了两个状态，一个是渲染之前的状态，也叫虚拟DOM，一个是当前状态，通过对不同状态的对比，react仅仅需要渲染界面改变了的部分！！所以react适用于大量的数据交互的场景！！

第二点、组件化开发

组件化开发是react的首创，它是这样认为的，一个界面的不同部分，我们可以划分为一个个小小的模块，这些小小的模块，就被称为一个个组件。

组件树：react最底层的模块，我们称为一个根组件，一个根组件，又可以包含多个组件，组件之间形成的嵌套关系，叫做组件树！！react最终的页面模型就是由一个个的组件构成的组件树。同时，组件是可以复用，一个组件可以被复用到整个应用的任何地方，所以能够极大的提高开发效率！！

//最顶层仅仅只有一个dom元素。（根元素）
<div>
    <header></header>
    <content></content>
    <footer></footer>    
</div>

2、react的 hello world 示例
先使用script引入react相关的库。

<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

再到页面中申明一个react的入口dom。

<div id='root'></div>

然后进行render操作：

ReactDOM.render(<h1>hello world!!</h1>,
document.getElementById('root'))

然后运行就会在界面中打印出来hello world！！

完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react学习</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
    <div id="app">

    </div>
    //注意这里！！！！！type='text/babel'
    <script type="text/babel">

        ReactDOM.render(<h1>hello world！</h1>,document.getElementById('app'));
    </script>
</body>
</html>

3、上面的hello world实例说明：

第一、id为root的div是必要的，这个div相当于react这个单页面应用的入口，它所有的操作都在div中进行。

第二、ReactDOM是一个对象，它有一个render方法，这个方法有两个参数，第一个参数就是dom或者组件，第二个参数就是获取页面入口dom。作用就是把第一个参数中的内容放到这个id为root的div中去。

4、组件component！！
组件其实就是提供dom元素的。它可以用function或者class来表示。

//function的表示方式
var Hello = React.createClass({
    render: function(){
        return <div>hello world!</div>
    }
})

//注意下面换成组件了，不再是之前的dom。
ReactDOM.render(<Hello />,
document.getElementById('root'))

关于组件说明：组件必须是使用首字母大写的方式。它必须有一个render方法，render方法就是用来提供dom元素的。这也是组件的核心意义所在，无render方法的组件会报错！！

5、props
属性是用来组件通信的，在这里，仅仅只介绍props是什么，以及怎么用，更复杂的应用会在后面讲！

//这里给Hello添加一个title属性。
ReactDOM.render(<Hello title='mapbar_front' />,
document.getElementById('root'))

在界面中就是这么用：
使用this.props.title的方式进行使用。

var Hello = React.createClass({
    render: function(){
        return <div>{this.props.title} hello world!</div>
    }
})

界面就会展示出来：mapbar_front hello world!

6、state状态
相比于props，state是可以被改变的。
从作用上来说，props用于组件传值。state用于界面展示！！
在script的引入中使用state，state定义在周期函数getInitialState中。
这个函数返回一个对象，这个对象中的属性就是state。

var Hello = React.createClass({
    getInitialState: function(){ 
        return { 
            like: true
        }
    }
    render(){
        return <div>{this.state.like}</div>
    }
})

这是一个简单的使用示例。那么怎么理解state是进行页面状态管理的呢？
先不用着急，等看完事件部分，咱再回来看state。

7、事件
在react中，绑定一个事件是直接在dom中。

<div onClick={this.click}> click me!</div>

click这个函数就定义在组件中。直接看一个综合示例！！！

8、综合示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react学习</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
    <div id="app">

    </div>
    <script type="text/babel">
        var Hello = React.createClass({
            getInitialState: function () {
                return {
                    like: true,
                    isShow: false
                }
            },
            click: function () {
                this.setState({
                    like: !this.state.like
                })
            },
            render () {
                return   <div>
                        <h1>hello world!{this.props.title}</h1>
                        <div>
                            {   this.state.like ? <span>I like you</span>: <span>I dislike you</span> }
                        </div>
                        <div onClick={ this.click }>tab</div>
                    </div>
            }
        })
        ReactDOM.render(<Hello title="mapbar_front" />,document.getElementById('app'));
    </script>
</body>
</html>