ReactNote01：React的特点和优点

发表于 2022-01-12 更新于 2022-03-03 分类于 React笔记阅读次数： Waline：本文字数： 2.7k 阅读时长 ≈ 2 分钟

React作为国内最流行的前端框架之一，肯定有它的好用先进之处，作为技术geek，那肯定要学穿它🤔

React的特点

声明式编程
- 允许我们只需要维护自己的状态，当状态改变时，React可以根据最新的状态去渲染我们的UI界面;
组件化开发
- 能把一个大问题分解成一个小问题一个个实现，便于开发和维护。
多平台适配
- React不仅能开发网页应用，React Native也能开发Android和iOS应用。

除此之外，学习React还能掌握先进的技术和思想。并且React的思想被许多框架借鉴，比如Google的Flutter框架就借鉴了React的思想，老美有意思的一点就是他借鉴React的思想，直接官网摆明了说出来。

React开发依赖

开发React必须依赖三个库:

react:包含react所必须的核心代码
react-dom:react渲染在不同平台所需要的核心代码
babel:将jsx转换成React代码的工具
- babel可以将es6语法转换为es5语法，并且可以将jsx语法转换为js语法。帮助我们更好的进行开发。

react包中包含了react和react-native所共同拥有的核心代码。

react-dom针对web和native所完成的事情不同:

web端:react-dom会讲jsx最终渲染成真实的DOM，显示在浏览器中
native端:react-dom会讲jsx最终渲染成原生的控件(比如Android中的Button，iOS中的UIButton)

React的优点

为什么需要React呢，我们来看一个案例，要求点击按钮，网页上的文字内容会发生改变。

以下是原生实现。

<body>
    <h2 class="title"></h2>
    <button class="btn">change text</button>

    <script>

        // 这里是命令式编程，就是给计算机一步步指令去完成一件事

        // 1.定义数据
        let message = "Hello, World!";

        // 2.将数据显示在h2元素中
        let titleEl = document.getElementsByClassName("title")[0];
        titleEl.innerHTML = message;

        // 3.点击按钮，页面数据发生改变
        let btnEl = document.getElementsByClassName("btn")[0];
        btnEl.addEventListener("click", e => {
            message = "Hello, React!";
            titleEl.innerHTML = message;
        })
    </script>
</body>

再来看看React实现，是不是感觉代码有点多，还比原生的复杂了。这里是因为我们调用了render函数，并且还没用到React的声明式编程和组件化开发的特点。

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

    <script type="text/babel">

        let message = "Hello,World!";

        function btnClick() {
            message = "Hello,React!";
            console.log(message);
            render();
        }

        function render() {
            ReactDOM.render(
                <div>
                    <h2>{message}</h2>
                    <button onClick={btnClick}>change text</button>
                </div>,
                document.getElementById("app")
            );
        }

        render();

    </script>


    <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>
    <!-- babel转换代码 -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</body>

下面再来看利用了React特点写的代码

<body>
    <div id="app"></div>
    <script type="text/babel">
        class App extends React.Component {
            constructor() {
                super();
                this.state = {
                    message: "Hello,World",
                }
            }

            render = () => {
                return (
                    <div>
                        <h2>{this.state.message}</h2>
                        <button onClick={this.btnClick}>change text</button>
                    </div>
                )
            }

            btnClick = () => {
                // this.state.message = "Hello,React";
                // console.log(this.state);

                this.setState({
                    message: "Hello,React"
                })
            }
        }

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

    <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>
    <!-- babel转换代码 -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</body>

看起来确实优雅了不少。

------------- 本文结束感谢阅读 -------------