前端react框架的部分总结

最新推荐文章于 2024-03-12 15:22:05 发布

VIP文章 AKA_Aple

最新推荐文章于 2024-03-12 15:22:05 发布

阅读量681

点赞数

文章标签： reactjs

本文链接：https://blog.csdn.net/AKA_Aple/article/details/114008942

版权

前端react框架的部分总结

react的优势

react相对其他框架优势：高性能高效率实现了前端界面的高性能高效率开发，所以说react很擅长处理组件化的页面。

和vue的区别

在React中，一切都是JavaScript，所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖。你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面；在Vue中有自带的渲染函数，Vue也支持JSX，Vue官方推荐使用模板渲染视图。组件分为逻辑类组件和表现类组件。

react特点和优势：

1.虚拟dom

虚拟DOM是在DOM的基础上建立了一个抽象层，对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟DOM，最后再批量同步到DOM中。

是一个JavaScript对象，重新渲染的时候，会对比这一次产生的Virtual DOM和上一次渲染的Virtual DOM，对比发现差异之后，只需修改真正的DOM树时就只需要触及差别中的部分就行，使用这个虚拟dom，避免对原生dom的创建和对比，这样就大大提升了性能，因为原生dom的创建是非常消耗性能的，而对js对象的对比和创建对性能开销很小，从这种方式来提供应用的性能

2.diff 算法：

当用户对视图进行更新的时候，先去更新虚拟 DOM，这里说的进行更新，不是在原来的树上面进行更新，而是生成一颗新的树，接下来两棵树就可以进行对比，从而找到不一样的地方，进行更新。

react的引入

使用 React 时我们需要通过 CDN 引入 3 个库，分别是 react.min.js 、react-dom.min.js 和 babel.min.js：

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>

<!-- 提供与 DOM 相关的功能 -->

<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>

<!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->

<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

react的语法

在 react 中，实际上是使用的 createElement 方法来创建的虚拟 DOM。

使用 createElement 方法来创建一段视图，代码如下：

通过 jsx 方法创建一段视图

通过两种对比可以看到，在react中，底层是通过 createElement 方法来创建的虚拟DOM节点，但是这种方法写的代码比较冗余，非常臃肿。对开发人员不太友善。

所以在 react 提供了 JSX 的方式来描述视图。JSX 本质上是 createElement 方法的一个语法糖。

扩展：在 vue 中，通过模板（template）来描述我们的视图，在模板里面可以使用 js 表达式等东西。

react 中的组件

在 react 中，组件可以分为两大类：

函数式组件（在以前被称之为无状态组件）

类组件（在以前被称之为有状态组件）

在react 中的这两种组件都是有状态组件了，所以就没有区分。

在react 中创造组件

格式：首先组件名首字母大写、第二个就是要返回一段 JSX

创建一个函数式组件

创建一个类组件

事件的处理

如何绑定事件

与vue不同 React使用的是 onClick={}

代码如下：

this 指向

在类组件中this 指向存在问题

例如：

class Welcome extends React.Component {

        eventHandle(){

            // 我们在组件的事件处理函数上面，期望 this 是指向当前这个组件

            console.log(this);   //undefined

        }

        render() {

            return (

                <div>

                   <p onClick={this.eventHandle}>这是 welcome 组件</p>

                   {this.props.children}

                </div>

            )

        }

    }

    ReactDOM.render(<Welcome>this is a test</Welcome>, document.getElementById("app"));

通过上面的代码，我们发现类组件里面正常访问 this 时，不能指向当前的组件，拿到的是 undefined。

接下来介绍 3 种方式来修正这个 this。

将事件处理函数修改为箭头函数

class Welcome extends React.Component {

        eventHandle = ()=>{

            // 我们在组件的事件处理函数上面，期望 this 是指向当前这个组件

            console.log(this);

        }

        render() {

            return (

                <div>

                   <p onClick={this.eventHandle}>这是 welcome 组件</p>

                   {this.props.children}

                </div>

            )

        }

    }

    ReactDOM.render(<Welcome>this is a test</Welcome>, document.getElementById("app"));

在 constructor 中通过 bind 来绑定 this 的指向

class Welcome extends React.Component {

        constructor(){

            super();

            this.eventHandle = this.eventHandle.bind(this)

        }

        eventHandle(){

            // 我们在组件的事件处理函数上面，期望 this 是指向当前这个组件

            console.log(this);

        }

        render() {

            return (

                <div>

                   <p onClick={this.eventHandle}>这是 welcome 组件</p>

                   {this.props.children}

                </div>

            )

        }

    }

    ReactDOM.render(<Welcome>this is a test</Welcome>, document.getElementById("app"));

在绑定事件的时候，通过箭头函数

class Welcome extends React.Component {

        eventHandle(){

            // 我们在组件的事件处理函数上面，期望 this 是指向当前这个组件

            console.log(this);

        }

        render() {

            return (

                <div>

                   <p onClick={()=>this.eventHandle()}>这是 welcome 组件</p>

                   {this.props.children}

                </div>

            )

        }

    }

    ReactDOM.render(<Welcome>this is a test</Welcome>, document.getElementById("app"));

接下来，我们来看一下参数的传递。

通过 bind 方法，在绑定 this 指向时来传递参数

class Welcome extends React.Component {

        eventHandle=(name)=>{

            console.log(this);

            console.log(name);

        }

        render() {

            return (

                <div>

                   <p onClick={this.eventHandle.bind(this,'F71')}>这是 welcome 组件</p>

                   {this.props.children}

                </div>

            )

        }

    }

    ReactDOM.render(<Welcome>this is a test</Welcome>, document.getElementById("app"));

通过箭头函数来传递参数

class Welcome extends React.Component {

        eventHandle=(name,e)=>{

            console.log(this);

            console.log(name);

            console.log(e);

        }

        render() {

            return (

                <div>

                   <p onClick={(e)=>this.eventHandle('F71',e)}>这是 welcome 组件</p>

                   {this.props.children}

                </div>

            )

        }

    }

    ReactDOM.render(<Welcome>this is a test</Welcome>, document.getElementById("app"));

state

state 翻译成中文，是“状态”的意思。也就是说，是组件的状态。

这里的所谓状态，就是指的是组件内部的数据。

Vue.component(‘Com1’,{

template : ‘’,

data(){

// 内部数据

name : 'F71'

}

})

this.name = ‘xxxx’

接下来，我们来看一下react 中 state 的使用。代码如下：

class Welcome extends React.Component {

        constructor(){

            super();

            this.state = {

                name : 'F71',

                age : 18,

                gender : 'male'

            }

        }

        render() {

            return (

                <div>

                  <p>{this.state.name}</p>

                  <p>{this.state.age}</p>

                  <p>{this.state.gender}</p>

                </div>

            )

        }

    }

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

在 react 中，为 state 提供了一种简写的形式：

class Welcome extends React.Component {

        state = {

            name : 'F71',

            age : 18,

            gender : 'male'

        }

        render() {

            return (

                <div>

                  <p>{this.state.name}</p>

                  <p>{this.state.age}</p>

                  <p>{this.state.gender}</p>

                </div>

            )

        }

    }

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

react 修改组件的数据，需要调用一个方法。setState 方法，示例如下：

class Welcome extends React.Component {

        state = {

            name : 'F71',

            age : 18,

            gender : 'male'

        }

        eventHandle = ()=>{

            // 用新值替换旧的值

            this.setState({

                age : ++this.state.age

            })

        }

        render() {

            return (

                <div>

                  <p>{this.state.name}</p>

                  <p>{this.state.age}</p>

                  <p>{this.state.gender}</p>

                  <button onClick={this.eventHandle}>年龄增加</button>

                </div>

            )

        }

    }

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

setState 修改数据的时候，仍然是异步的进行修改。示例如下：

class Welcome extends React.Component {

        state = {

            name : 'F71',

            age : 18,

            gender : 'male'

        }

        eventHandle = ()=>{

            // 用新值替换旧的值

            this.setState({

                age : 20

            },function(){

                console.log(this.state.age);

            })

            

        }

        render() {

            return (

                <div>

                  <p>{this.state.name}</p>

                  <p>{this.state.age}</p>

                  <p>{this.state.gender}</p>

                  <button onClick={this.eventHandle}>年龄增加</button>

                </div>

            )

        }

    }

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

在上面的代码中，我们如何要获取state 修改后的值，可以在 setState 中使用回调函数。

欢迎使用Markdown编辑器

你好！这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

全新的界面设计 ，将会带来全新的写作体验；
在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
全新的 KaTeX数学公式 语法；
增加了支持甘特图的mermaid语法¹ 功能；
增加了 多屏幕编辑 Markdown文章功能；
增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

~~删除文本~~

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片: Alt

带尺寸的图片:

居中的图片: Alt

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

项目
- 项目
  - 项目

项目1
项目2
项目3

计划任务
完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定

最低0.47元/天解锁文章

AKA_Aple

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端react框架的部分总结

前端react框架的部分总结react的优势react相对其他框架优势：高性能高效率实现了前端界面的高性能高效率开发，所以说react很擅长处理组件化的页面。和vue的区别在React中，一切都是JavaScript，所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖。你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面；在Vue中有自带的渲染函数，Vue也支持JSX，Vue官方推荐使用模板渲染视图。组件分为逻辑类组件和表
复制链接

扫一扫