React简介与实例

最新推荐文章于 2024-09-10 05:22:21 发布

SCENARIO24

最新推荐文章于 2024-09-10 05:22:21 发布

阅读量263

点赞数 1

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/leonardo_netsr/article/details/119104297

版权

React 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

简介

React来自于Facebook，Facebook的开发者当时在开发一个广告系统，因为对当前所有的MVC框架不满意，就自己写了一个UI框架，于是就有了React。
后来觉得实在是好用，在2013年月份开源的此框架。在React的官方博客中明确阐述了React不是一个MVC框架，而是一个用于构建组件化UI的库，是一个前端界面开发工具，所以顶多算是MVC中的V（view）。
React最大的价值不是高性能的虚拟DOM、封装的事件机制、服务器端渲染，而是声明式的直观的编码方式。
React号称能让新人第一天开始使用就能开发新功能。简单的编码方式会让新手能很快上手，同时也降低了代码维护的成本。

React的核心

组件化
把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。
网页由多个组件拼接或者嵌套组成。
虚拟DOM
为了实现页面中DOM元素的高效更新
DOM和虚拟DOM的区别：
DOM：浏览器中，提供的概念，用JS对象，标识页面上的元素，并提供了操作元素的API
虚拟DOM：是框架的概念；而是开发框架的程序员，手动用JS对象来模拟DOM元素和嵌套关系；
本质：用JS对象，来模拟DOM元素和嵌套关系
目的：就是为了实现页面元素的高效更新
DIFF算法
新旧两颗DOM树，逐层对比的过程，就是Tree Diff;当整顿DOM逐层对比完毕，则所有需要背按需更新
的元素，必然能够找到

需要引入三个库

react.min.js React 的核心库
react-dom.min.js 提供与 DOM 相关的功能
babel.min.js Babel 可以将 ES6 代码转为 ES5 代码，对于不支持 ES6 浏览器上执行 React 代码

<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script type="text/javascript" src="js/babel.min.js"></script>

什么是JSX

在React的开发中，会经常使用一种特殊的语法来描述 React 的组件，叫做JSX，虽然它看上去像是一种模板语言，但是其实它是一种语法糖。
JSX 的特点是能够让开发者在JavaScript代码中直接写HTML的标记，这也是 React 推出时最受争议的一点，就是如何去把 UI 的描述放到代码中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>
    <script type="text/babel">
        // 通过REACT渲染元素
        var li1 = React.createElement('li', null, '1');
        var li2 = React.createElement('li', {className: 'li-b'}, '2');
        var ul = React.createElement('ul', {className: 'ul-a'}, li1, li2);
        ReactDOM.render(ul, document.getElementById("d1"));

        // 通过JSX渲染元素，方式一：
        ReactDOM.render(
            <ul>
                <li>11</li>
                <li>22</li>
            </ul>,
            document.getElementById("d2")
        );

        // 方式二：
        var flag = true;
        var div = <div className="div">
            {flag ? 'hello abc' : 'hello xyz'}
        </div>
        ReactDOM.render(div, document.getElementById("d3"));
    </script>
    <style>
        .ul-a {
            font-size: 24px;
        }

        .li-b {
            color: red;
        }
    </style>
</head>
<body>
<div>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
</div>

</body>
</html>

组件

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>
    <script type="text/babel">
        window.onload = function () {
            // 2、创建虚拟DOM元素
            class Hello extends React.Component {
                constructor() {
                    super();
                    this.state = {  //初始化
                        id: 1,
                        name: 'xyz'
                    }
                }

                change() {
                    this.setState({id: 2})
                }

                render() {
                    return (
                        <div>
                            <h1>hello 123</h1>
                            <h1>hello 123</h1>
                            <h1>hello 123</h1>
                        </div>
                    )
                }
            }

            //3、将虚拟DOM元素渲染到页面上
            ReactDOM.render(
                <Hello/>,
                document.getElementById('example')
            );
        }
    </script>
</head>
<body>
<!--1、定义一个容器用于存放虚拟DOM-->
<div id="example"></div>
</body>
</html>

React渲染三步

1、定义一个容器用于存放虚拟DOM

<div id="example"></div>

2、创建虚拟DOM元素

var element=React.createElement('li',null,'2222')

3、将虚拟DOM元素渲染到页面上

ReactDOM.render(
	element,
	document.getElementById('example')
);

组件参数传递

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>
    <script type="text/babel">
        class HelloMessage extends React.Component {
            render() {
                return <h1>你好，{this.props.obj.name}</h1>
            }
        };

        const data = {
            address: '北京',
            obj: {name: '张三', mobile: '18888888888'}
        };

        /*使用函数定义了一个组件 需要显示传递props*/
        function Welcome(props) {
            return <h1>hello, {props.name}</h1>
        };

        ReactDOM.render(
            <div>
                <Welcome name={data.address}></Welcome>
                <HelloMessage {...data}/>
            </div>,
            document.getElementById('example')
        );
    </script>
</head>
<body>
<div id="example"></div>
</body>
</html>