React简单使用

最新推荐文章于 2024-01-21 16:05:29 发布

掉头发类型的选手

最新推荐文章于 2024-01-21 16:05:29 发布

阅读量297

点赞数 1

文章标签： react.js html

本文链接：https://blog.csdn.net/h360583690/article/details/122157101

版权

英文文档：React – A JavaScript library for building user interfaces

中文文档：React 官方中文文档 – 用于构建用户界面的 JavaScript 库

在学习一个框架的时候，要知道这个框架是什么，用来干什么，还有哪些相同作用的框架，有什么优势和特点。

React是用于构建用户界面的JavaScript库，框架主要用于构建UI，可以在React里传递多种类型的参数，如声明代码，传递动态变量，甚至是可交互的应用组件。使用虚拟DOM，而不是真正的DOM，可以用服务器端渲染。

框架的特点： 1，声明式设计，什么是声明式设计，与命令式设计相对立。命令式设计需要用算法来明确指出每一步该“怎么做”，声明式设计是告诉计算机“做什么”。

2，组件化，构建管理自身状态的封装组件，然后对其组合，构成复杂的UI。

3，高效，React通过对DOM的模拟，最大限度地减少与DOM的交互

4，灵活，无论现在使用什么技术栈，在无需重写现有代码的前提下，通过引入React来开发新功能。

5，使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互。

6，在React Native中可以使用React语法进行移动端开发。

一，jsx语法

在React中使用的是jsx语法，是js语法的扩展，能方便的描述UI，但浏览器只能识别js语法。在学习ES6的时候，ES6中有些不能识别，我们会使用babel将ES6转化为ES5。在这儿，也会使用babel将jsx语法转化为浏览器能识别的js语法。

二，虚拟DOM和真实DOM

什么是虚拟DOM。React提供了一些API来创建一种特别的一般js对象，是Object类型。

因为虚拟DOM只在React的内部使用，DOM的属性值也比较少。真实DOM的属性值会很多。

虚拟DOM最总会被React转化为真实DOM，进行展示。

三，创建虚拟DOM

创建虚拟DOM有两种方式：使用第二种方法

1，纯js方式

const VDOM = React.createElement(标签名，标签属性，标签内容)

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

    <script type="text/javascript">
        //使用js创建虚拟DOM
        // const VDOM = React.createElement(标签名，标签属性，标签内容(React.createElement()))
        const VDOM = React.createElement('h1', {id:'title'}, 'hello')
        //渲染虚拟dom到页面
        // ReactDOM.render(虚拟DOM, 容器)
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>

看一下在浏览器中运行的结构

这样在div里嵌套了一层h1标签。

如果还想在h1中再嵌套一层标签呢，在创建语句的标签内容位置写createElement(),这样写出来的话语句比较长，而且混乱。使用jsx语法可以解决这个问题。

2，使用jsx语法

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

    <script type="text/babel">
        //使用jsx创建虚拟DOM
        const VDOM = (
            <h1>
                <span>hello_world</span>
            </h1>
        )   //jsx
        //渲染虚拟dom到页面
        // ReactDOM.render(虚拟DOM, 容器)
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>

浏览器中运行的结构

嵌套了两层标签，而且使用jsx语法可以在js代码中直接写html代码，编写方便。

但浏览器只能识别js语法（第一种），不能识别jsx语法（第二种），所以要使用babel进行转码，将jsx转化成浏览器能识别的js。jsx相当于一个语法糖，计算机识别复杂的代码，而我们只编写简单的代码。

四，jsx语法规则

<style>
        .content{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="test"></div>

    <script type="text/babel">
        const Data = 'hello,WWW'
        // 创建虚拟DOM
        const VDOM = (
            <div>
                <h2 className="content" id="title">
                    <span>{Data.toLowerCase()}</span>        
                </h2>
                <input type="text"></input>
            </div>
        )
        // 渲染虚拟DOM到页面
        ReactDOM.render(VDOM, document.getElementById('test'))

        /*
            jsx语法
                1.定义虚拟DOM，不写引号
                2.标签中混入js表达式时要用{}
                3.样式的类名指定不用class，用className
                4.虚拟DOM，必须只有一个根标签
                5.标签必须闭合
        */
    </script>
</body>

1，定义虚拟DOM，不用写引号，如果html代码在一行的话，括号也不用加，有多行的话加括号。

2，标签中混入js表达式时要用{}，上面span标签中会显示Data中的数据，转成小写。

3，样式的类名指定不用class，用className。如果使用了class会报错。

4，虚拟DOM，必须只有一个根标签，用一个div将内容包起来，有多个根标签会报错。

5，标签必须闭合，在html代码中，可以只写<input type="text">，但jsx中必须将标签闭合，否则会报错。

6，在下面组件中有写到

五，组件

什么是组件，组件是用来实现局部功能效果的代码和资源的集合，使用组件能使代码复用，简化项目编码，提高运行效率。

例如，现在需要编写两个页面，这两个页面的导航栏一样，我们在编写导航栏时需要有html代码框架，css样式，用js进行交互，甚至是相同的图标，图片，字体等，将这些代码和资源进行整合，就写好了一个导航栏。这个导航栏还可以用到其他页面中，代码复用，简化编码。这个导航栏就是一个组件。

组件分为函数式组件和类式组件。

1，函数式组件

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

    <script type="text/babel">
        // 创建组件
        function Component() {
            return <h1>函数式组件</h1>
        }
        const VDOM = (
            <div>
                <h1>react</h1>
                <Component/>
            </div>
        )
        // 渲染组件到页面
        ReactDOM.render(VDOM, document.getElementById('test'))
    </script>
</body>

在这儿还有一个jsx语法规则：

创建虚拟DOM时标签的首字母

（1）以小写字母开头，转为html中的同名元素，若html中无同名元素，则报错。

（2）以大写字母开头，react就会去渲染对应的组件，若组件没有定义，则报错。

2，类式组件

如何创建一个类式组件，先给要写的组件取一个名，让它继承react中的一个内置的类，然后react组件使用一个名为render()的方法，有返回值，接收输入的数据并返回需要展示的内容。

render()是供实例使用的，render放在类（就是我们创建好的组件）的原型对象上。当我们渲染组件后，由react解析组件标签，找到这个组件，发现是一个类组件，随后react自动帮忙new出一个该类的实例，不需要我们自己new实例，通过这个实例调用render方法，从而将虚拟DOM转为真实DOM，展示在页面上。

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

    <script type="text/babel">
        // 创建类式组件
        class Component extends React.Component {// 继承react中一个内置的类
            // render放在类（component）的原型对象上，供实例使用
            // render中的this是Component的实例对象
            render() {
                console.log(this)
                return <h2>类式组件</h2>
            }
        }
        // 渲染组件到页面
        ReactDOM.render(<Component/>, document.getElementById('test'))
        /*
            执行了渲染组件的代码后
            由react解析组件标签，找到了类组件
            发现组件是由类定义的，随后react帮忙new出了一个该类的实例，并通过该实例调用到原型上的render方法
            将render返回的虚拟DOM转为真实DOM，呈现在页面上
        */
    </script>
</body>

组件还分为简单组件和复杂组件，区分简单和复杂组件。组件三大属性之一的state。可以简单的理解为无状态的就是简单组件，有状态的就是复杂组件。

六，组件实例三大属性

组件三大属性，state,props,refs_h360583690的博客-CSDN博客

七，React生命周期

https://blog.csdn.net/h360583690/article/details/122569063

八，React路由

https://blog.csdn.net/h360583690/article/details/122802345

掉头发类型的选手

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React简单使用

在学习一个框架的时候，要知道这个框架是什么，用来干什么，还有哪些相同作用的框架，有什么优势和特点。React是用于构建用户界面的JavaScript库，框架主要用于构建UI，可以在React里传递多种类型的参数，如声明代码，传递动态变量，甚至是可交互的应用组件。使用虚拟DOM，而不是真正的DOM，可以用服务器端渲染。框架的特点： 1，声明式设计，什么是声明式设计，与命令式设计相对立。命令式设计需要用算法来明确指出每一步该“怎么做”，声明式设计是告诉计...
复制链接

扫一扫