react学习
关注
分享
扫一扫
入门React.js笔记
coder_路远
抱着学习的心态做IT
展开
-
React学习之列表
说明：本系列所有demo代码的github地址为：https://github.com/Brucewu998/react.js-learning，笔者会不断更新这些代码，本篇代码在目录下demo-08文件夹下。在本系列第二篇：React学习之元素渲染中，讲到了数组的渲染属于React的列表渲染；在JavaScript中，我们可以使用map()函数来遍历数组，然后得到新的列表：const numbers = []1,2,3];const newNumbers = numbers.map(num =原创 2020-09-02 00:47:41 · 767 阅读 · 0 评论 -
React学习之条件渲染
说明：本系列所有demo代码的github地址为：https://github.com/Brucewu998/react.js-learning，笔者会不断更新这些代码，本篇代码在目录下demo-07文件夹下。条件渲染在React中，我们可以根据不同的需求来创建不同的组件，有时候在一些特定的场景中，我们需要呈现不同的状态，这个时候我们就可以利用条件渲染来完成这个需求。React中的条件渲染和JavaScript中一样，使用if运算或者条件运算符创建元素表示当前的状态，然后可以根据这些条件运算来更新U原创 2020-09-01 00:08:31 · 230 阅读 · 0 评论 -
React学习之事件处理
说明：本系列所有demo代码的github地址为：https://github.com/Brucewu998/react.js-learning，笔者会不断更新这些代码，本篇代码在目录下demo-06文件夹下。我们知道，传统HTML的DOM包含了各种各样的事件处理，例如鼠标点击事件onclick：在HTML中应用：<button onclick="handleClick"></button><script> function handleClick原创 2020-08-27 10:39:52 · 240 阅读 · 0 评论 -
React学习之state与生命周期
说明：本系列所有demo代码的github地址为：https://github.com/Brucewu998/react.js-learning，笔者会不断更新这些代码，本篇代码在目录下demo-05文件夹下。在React学习之组件与props这一节中，讲述了React相关的传值机制props，我们知道React对props由严格的保护机制，一旦给定值，在组件中是不允许改变的；在很多场合中，组件的内容需要根据数据的刷新而刷新，这个时候就可以用到React提供的State，在这里称之为状态机，State与原创 2020-08-26 00:40:51 · 284 阅读 · 0 评论 -
React学习之获取真实DOM节点
在React中，组件并不是真实的DOM节点，而是一种存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做DOM diff，它可以极大提高网页的性能表现。有时候，我们需要从组件中获取真实的DOM节点，这个时候可以用ref属性，下面来看一个demo:<!DOCTYPE html>..原创 2020-08-24 21:49:25 · 1019 阅读 · 0 评论 -
React学习之组件与props
组件组件允许我们将UI拆分为独立可复用的代码片段，并对每个代码片段进行独立构思，并且React的组件接受任意的入参props，即父组件可以利用props向子组件传值，稍后会再做讲解。在React中，有两种方式可以用于创建组件：函数组件，就是以JavaScript函数方式创建的组件，形式如下function Title(props){ return <h1>{props.title}</h1>}ES6 class 组件，这里采用ES6 的class语法来..原创 2020-08-24 21:18:40 · 261 阅读 · 0 评论 -
React学习之元素渲染
元素渲染在React中，元素是构成React应用的最小单位，就如同一个HTML文档包含各种各样的标签一样，React中的元素描述了我们要在屏幕上构建出来的内容，官方给出的解释是React元素比浏览器DOM元素开销要小很多， 如：const element = <div>Hello, react.js!</div>在上一节讲过， 已创建的元素，通过ReactDOM.render()方法可以将某个元素渲染为真实的DOM节点，通常由React构建的应用只有单一的根DOM节点，原创 2020-08-22 00:34:35 · 253 阅读 · 0 评论 -
React学习-开篇
介绍React官网对自己最明显的介绍是：声明式、组件化和一次学习随处编程这三个标签，官网对其的解释是： 声明式：React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。以声明式编写 UI，可以让你的代码更加可靠，且方便调试。 组件化：创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。组件逻辑使用 JavaScript 编写而非模版，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。 一次学习原创 2020-08-20 13:51:07 · 290 阅读 · 0 评论