邂逅React

2021-05-10 21:33:52 作者：互联网

邂逅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