其他分享
首页 > 其他分享> > 邂逅React

邂逅React

作者:互联网

邂逅React

熟悉前端开发的都知道目前前端(PC端)是由三大框架占据市场的,分别是Vue,React,Angular;Angular在国内用的不多,不做讨论,所以在国内,React和Vue都是需要掌握的,目前我正在学习React,所以现在做一系列博客为自己做总结。

目前我是根据王红元老师的React视频来学习,所以可能会存在一些相同的东西。

1.首先我们需要了解React出现的背景,以及什么是React:

1.1 众所周知,前端开发是需要三大技术HTML,CSS,JS,我们可以使用原生开发,但是效率太低了


React就是在频繁的操作DOM的环境中诞生出来的,下面是React的起源

1.2 那么React有什么特点值得我们去推崇

(1)声明式编程


这个不同于传统的DOM编程(命令式编程),传统的命令式编程时书写一条条指令,让电脑执行,而声明式是只需要声明自己的状态,让React负责渲染

(2)组件化开发

(3)多平台适配


而且在React是把All in JS作为自己的准则,HTML,CSS都可以通过JS来书写,所以这给它带来一个优点,就是特别的灵活

2.初体验React:

和vue一样React都是声明式编程,通过框架来管理数据,我们首先来看传统的DOM操作:

<body>
    <h2>Hello World</h2>
    <button>改变文本</button>
</body>


<script>
    // 通过DOM操作来修改页面    
    document.getElementsByTagName("button")[0].onclick = e => {
        document.getElementsByTagName("h2")[0].innerText = "Hello React";
    }       
</script>

朴实无华的DOM操作,但是在React是专门存在一个容器来管理需要渲染的数据,如图:

<body>
    <div id="app"></div>
</body>

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel">
    //封装App组件
    class App extends React.Component {
        constructor() {
            super();
            // 数据不能直接放在里面,不然没法在修改数据之后刷新的得到修改之后的数据
            // this.message = "Hello World";

            // 在state中书写,并且使用React提供的方法才能实现响应式数据
            this.state = {
                message: "Hello World",
            }
        }

        btnClick() {
            // console.log(this); //underfined 不处理直接使用的话,这里是找不到this的,所以下面的代码就会报错
            // this.message = "Hello React";

            // this.state.message = "Hello React"; //这样虽然能够修改数据,但是并不会在页面中获得修改之后的数据

            // 必须使用React提供的方法,来修改数据
            this.setState({
                message: "Hello React",
            })
        }

        render() {
            // 注意,这里需要使用bind来绑定this的指向
            return (
                <div>
                    <h2>{this.state.message}</h2>
                    <button onClick={this.btnClick.bind(this)}>改变文本</button>
                </div>
            );
        }
    }

    ReactDOM.render(<App/>, document.getElementById("app"));
</script>

这里可以看出React是将数据放在state中管理,并通过setState改变数据,并通过jsx将带有数据HTML生成出来,当然也会存在许多细节,比如:在点击事件书写的时候,this的指向是被改变的,必须将this重新改变成App的实例对象,这块就到后面再慢慢说。

这里也能看出React和传统的DOM存在很大区别,和Vue倒是有点类似。

好了,今天的介绍就到这了。

标签:邂逅,DOM,React,state,message,数据,Hello
来源: https://www.cnblogs.com/coderLsq/p/14752947.html