![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
ReactJs
liuhenghui5201
这个作者很懒,什么都没留下…
展开
-
ReactJs 高级篇一 Context 使用
React中Context主要解决了在多层级组件树种如果需要将最外层数据传递到最里层需要层层通过props属性进行传递,由此比较麻烦,所以React中出现了Context,比如我们在一个组件树中,每层都有可能用到用户信息。我们用Context在最外层进行创建全局上下文环境变量,付其初始默认值。在组件数中通过Context相关API都可以获取到。Context主要API:1,createCo...原创 2020-03-24 22:55:41 · 698 阅读 · 1 评论 -
React 第十二章 React思想
本章将介绍一下在接到需求时,怎么使用React去实现它,通过实现过程我们来理解React的一些设计思想。比如我们现在要实现这样一个微信的收藏界面1,首先第一步需要根据界面功能进行划分组件。根据界面结构我们将其整体对外红色区域封装为一个组件 WeiChatWindow,其内部分为左侧的工具栏Toolbar,右侧黄色部分为内容面板ContentPanel,内容面板又分为收藏类别Favo...原创 2020-03-24 17:28:41 · 153 阅读 · 0 评论 -
React 第十一章 组件的组合使用
在之前组件之前都是通过父组件的render中进行合并返回为一个整体组件,单个组件相对外部都是相互独立的。本节将会介绍组件之间的组合,如包裹关系、通过props传递组件进行内部组合等1,通过组件标签进行包裹子组件实现组合,在组件内部通过this.props.children 特殊属性进行获取,如:import React from 'react';import ReactDOM fr...原创 2020-03-24 14:12:39 · 198 阅读 · 0 评论 -
React 第十章 状态提升
1,什么是状态提升?在很多情况下我们在React组件中 数据并不一定只是在组件内部使用,我们有可能需要将组件中的数据共享出来,在其他组件中使用。但之前我们说过React是一个单向数据流,只能将数据通过props传入子组件中,子组件中也只能将数据通过state在组件内部流动,或者再通过props传入到该组件的子组件中,类似于瀑布一样,数据向下流动,中间可能会产生数据但仍只能向下流。而此时我们就需...原创 2020-03-23 21:08:27 · 205 阅读 · 0 评论 -
React 第九章 表单的使用
1,什么是受控组件?受控组件简单的理解则为 比如表单页面中的输入input标签,在没有设置其value数据来源时,则我们输入则展示什么,而如果我们设置了其数据来源为React中的state中值时,此时该input组件中内容完全则展示为state中的值,不在受我们输入的内容控制了,这种数据来源仅直接从state中获取展示的组件则为受控组件,如果需要按我们预期的效果展示,则需要我们对受控组件中的数...原创 2020-03-23 18:56:48 · 175 阅读 · 0 评论 -
React 第八章 列表渲染以及key的使用
在页面中list是较为常见的一种页面展示方式,在React中我们可以通过数组map函数以及其他循环语句实现jsx数组在页面组件的大括号{}中进行展示。1,将数组进行循环展示如下,使用Array.map函数对原始数据进行遍历改装后返回一个jsx语法的数组,并在页面元素ul中展示import React from 'react';import ReactDOM from 'react-...原创 2020-03-17 18:16:32 · 300 阅读 · 0 评论 -
React 第七章 条件渲染
根据条件渲染不同组件,可以实现组件的显示与隐藏。第一种:在函数内部通过属性props条件的判断,返回不同的组件,进行控制显示隐藏。如果返回null则表示不展示隐藏。//1,条件渲染function UserGreeting(props) { return <h1>Welcome back!</h1>;}function GuestGreeting(pr...原创 2020-03-17 16:37:54 · 353 阅读 · 0 评论 -
React 第六章 事件的绑定
1,React中元素事件的绑定在传统的Html中对元素进行绑定写法如下:<button onclick="activateLasers()"> Activate Lasers</button>React中写法如下:<button onClick={activateLasers}> Activate Lasers</butto...原创 2020-03-17 00:09:29 · 137 阅读 · 0 评论 -
React 第五章 state & 组件生命周期
本章我们主要讲解 组件之state使用,以及组建的生命周期,在本章我们将使用class进行组件编写。1,组件的状态state在之前我们讲过一个页面时间的例子,之前我们使用的属性props进行定时页面更新渲染。但是作为一个时钟,根据面向对象思想,其更新时间应该由自身内部控制,而不是从外界传入。所以作为一个组件器必不可少的需要有自己内部状态数据功能。所以出现了组件内部state状态机制。有时我...原创 2020-03-16 22:53:33 · 167 阅读 · 0 评论 -
ReactJs 第四章组件&组件props
1,组件以及组件值的传递在之前我们介绍了JSX、React元素,以及元素的渲染,接下来我们要进入React的页面组成关键组件。这时我们就可以将React元素的范围进行扩充,React元素可以分为 原生html元素标签和用户自定义组件元素。用户自定义组件又分为函数组件和ES6的class组件。在React解析过程中小写开头的标签都会以html原生标签进行解析,如果用户自定义的组件元素以小写...原创 2020-03-16 19:29:09 · 134 阅读 · 0 评论 -
ReactJs 第三章 React元素的渲染
什么是React元素?又是什么时候进行渲染? 在jsx文件中我们定义的每一个Jsx代码都为React元素,如最简单的 const ele = <h1>Hello World</h1>; 在上一章我们知道React会通过Bable将其进行编译转换。同样我们存在疑问,React是什么时候进行将元组进行渲染到页面上的,在Rreact中 ,Rreact使用Reac...原创 2020-03-16 18:12:09 · 113 阅读 · 0 评论 -
ReactJs 第二章 JSX
JSX是书写在jsx文件中的看似JavaScript语法但又包含Html标签的一种新的写法。jsx为Javascript的一种扩展语法,tsx则为TypeScript 的扩展语言。其书写看起来有JS也有Xml标签。1,JSX之{大括号}表达式在标签内的使用 在JSX中可以使用大括号来进行嵌入需要替换的部分,可以替换之前定义的变量、函数表达式等表达式,如:...原创 2020-03-16 17:26:41 · 317 阅读 · 0 评论 -
ReactJs 第一章HelloWorld
创建ReactJs工程(本人使用的是create-react-app(FaceBook的一个React脚手架工具))。删除新创建工程中无用文件保留工程文件如下:index.html 代码如下:<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> ...原创 2020-03-16 16:32:48 · 175 阅读 · 0 评论