![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 88
白小宇
学识的基础是创造的基础。
展开
-
React学习:JSX
什么是JSX?(1)JSX 是 JavaScript 的一种扩展语法。它具有 JavaScript 的全部能力。 (2)JSX 可以生成 React “元素”。 (3)JSX 也是一个表达式。特别在编译之后,JSX 表达式就变成了常规的 JavaScript 对象。从本质上讲,JSX 只是为 React.createElement(component, props, …children...原创 2018-03-23 18:32:03 · 1372 阅读 · 0 评论 -
React学习:高阶组件
高阶组件的定义类比于高阶函数的定义:高阶函数的定义:接收函数作为输入,输出另一个函数的一类函数,被称作高阶函数。高阶组件的定义:接受React组件作为输入,输出一个新的React组件的组件。高阶组件本质上也是一个函数,并不是一个组件,这一点一定不要弄错。更通俗地描述为,高阶组件通过包裹(wrapped)被传入的React组件,经过一系列处理,最终返回一个相对增强(enhanced...原创 2018-05-03 16:19:52 · 680 阅读 · 0 评论 -
React学习:Refs
在常规的 React 数据流中,props 是父组件与子组件交互的唯一方式。要修改子元素,你需要用新的 props 去重新渲染子元素。然而,在少数情况下,你需要在常规数据流外(冲出 React 虚拟 DOM 的限制)强制修改子元素(被修改的子元素可以是 React 组件实例,或者是一个 DOM 元素),在这种情况下,React 提供了Refs来解决。简单说就是: 在从 render 方法中返...原创 2018-05-04 17:29:20 · 776 阅读 · 0 评论 -
React学习:组件的分类
React 组件有很多种分类方式,常见的分类方式有函数组件和类组件,无状态组件和有状态组件,展示型组件和容器型组件。真正理解它们还是对开发有很大益处的。1、 函数组件和类组件划分依据是根据组件的定义方式。例:下面的两种写法等价//函数式组件function MyComponent(props){ return <h1>Hello,{props.name...原创 2018-05-04 18:45:38 · 783 阅读 · 0 评论 -
React学习:片段(fragments) 与 插槽(Portals)
一、片段(fragments)片段(fragments) 可以让你将子元素列表添加到一个分组中,并且不会在DOM中增加额外节点。1、片段长什么样?render() { return ( <React.Fragment> <ChildA /> <ChildB /> <ChildC />...原创 2018-05-05 00:11:37 · 6113 阅读 · 1 评论 -
React学习:状态提升 实例
所谓 状态提升 就是将各个子组件的 公共state 提升到它们的父组件进行统一存储、处理(这就是所谓的”单一数据源“),然后再将父组件处理后的数据或函数props到各子组件中。那么如果子组件 要 修改父组件的state该怎么办呢?我们的做法就是 将父组件中负责setState的函数,以props的形式传给子组件,然后子组件在需要改变state时调用即可。下面实例场景 是 我看官方文档后...原创 2018-05-06 17:11:57 · 1861 阅读 · 1 评论 -
React安装及目录结构
1、安装cnpm国内使用 npm 速度很慢,你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org$ sudo npm config set registry https://registry.npm.taobao.org...原创 2018-11-30 17:19:59 · 1481 阅读 · 0 评论 -
React实战:留言板
留言板&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot; /&amp;amp;gt;原创 2019-02-02 19:02:58 · 1837 阅读 · 0 评论 -
React实战:井字棋 游戏
井字棋 游戏&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot; /&amp;amp;gt原创 2019-01-30 23:47:23 · 915 阅读 · 0 评论 -
React学习:状态(State) 和 属性(Props)
React :元素构成组件,组件又构成应用。 React核心思想是组件化,其中 组件 通过属性(props) 和 状态(state)传递数据。State 与 Props 区别props 是组件对外的接口,state 是组件对内的接口。组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下层组件需要使用上层组件的数据或方法,上层组件就可以通过下层组件...原创 2018-04-04 21:58:40 · 28925 阅读 · 10 评论 -
React学习:State 和 生命周期的应用
React :元素构成组件,组件又构成应用。 React核心思想是组件化,其中 组件 通过属性(props) 和 状态(state)传递数据。首先看个实例写法一:函数式组件function Clocks(props){ return <div>time is : {props.date.toLocaleTimeString()}</div&g...原创 2018-04-08 11:56:09 · 511 阅读 · 0 评论 -
React学习:事件处理
React :元素构成组件,组件又构成应用。 React核心思想是组件化,其中 组件 通过属性(props) 和 状态(state)传递数据。一、React 元素 与 DOM 元素 事件处理区别(1)命名:React 事件使用驼峰命名,而不是全部小写 (2)写法上: HTML里:&amp;amp;amp;lt;!-- onclick里c小写,用引号包围内容(想想JSX怎么包裹变...原创 2018-04-08 23:05:53 · 1186 阅读 · 0 评论 -
React学习:条件渲染
React 中的条件渲染就和在 JavaScript 中的条件语句一样。通过 JavaScript 条件操作符(如 if ) 根据不同的条件 来决定创建渲染不同的元素,并且让 React 更新匹配的 UI 。仔细阅读代码,你会发现这一章对你收获最大的是怎么让代码写的更简单优雅。一、怎么用看下面dome就懂了,顺便看看我们 在多个页面写react 与 在一个页面写react的区别...原创 2018-04-15 00:58:03 · 5789 阅读 · 0 评论 -
React学习:列表(Lists) 和 键(Keys)
首先,回顾一下在 JavaScript 中如何转换列表。给定下面代码,我们使用 map() 函数使 numbers 数组中的元素值翻倍const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map((number) => number * 2);console.log(doubled);输出: [2, 4, 6, 8...原创 2018-04-15 03:20:20 · 2918 阅读 · 0 评论 -
React学习:组件的生命周期
一、什么是生命周期?生命周期就是指一个对象的生老病死。而组件的生命周期则是这个组件从创建到销毁的一个过程。在这个过程中会有不同的阶段,从而会产生一些对应的生命周期函数来供我们使用,以便能够进行一些渲染、更新等处理。 react的生命周期可以分为三个阶段:初始化(挂载)存在期(更新)销毁 (卸载)在源码里对应的就是MOUNTING、RECEIVE_PROPS、UNMOU...原创 2018-04-04 23:40:20 · 1336 阅读 · 0 评论 -
React学习:表单(Forms)
受控组件(Controlled Components)在 HTML 中,表单元素如 &lt; input&gt;,&lt; textarea&gt; 和 &lt; select&gt; 表单元素通常保持自己的状态,并根据用户输入进行更新。在 React 中,可变状态一般保存在组件的 state(状态) 属性中,并且只能通过 setState() 更新。我们可以通过使 React 的 ...原创 2018-04-15 17:40:46 · 3467 阅读 · 0 评论 -
React学习:元素渲染
React :元素构成组件,组件又构成应用。一、什么是React元素?React 元素就是 普通的js对象 (俗称:虚拟DOM) 。 React 元素不是真实的 DOM 元素,所以也没办法直接调用 DOM 上原生的 API。 渲染过程:React元素 描述 虚拟DOM,再根据 虚拟DOM 渲染出 真实DOM。 1、虚拟 DOM :就是用 js 对象结构模拟出 h...原创 2018-04-03 22:59:59 · 2629 阅读 · 1 评论 -
React学习:组件(Components)
React :元素构成组件(复杂的组件由多个组件构成),组件又构成应用。 React核心思想是组件化,其中 组件 通过属性(props) 和 状态(state)传递数据。一、什么是组件?React通过组件的思想,将界面拆分成一个个可复用的模块,每一个模块就是一个React 组件。一个React 应用由若干组件组合而成,一个复杂组件也可以由若干简单组件组合而成。React 组件...原创 2018-04-04 17:02:50 · 5563 阅读 · 0 评论 -
React-Redux:动手实现
一、实现React-Redux的过程中的DOME样式点击Blue变为:二、概述及源码1、组件设计2、主要目录结构:- public | - index.html- src | - index.js | - components | - react-redux.js | - Contents.js | - Header.js | - ThemeSwitc...原创 2019-03-05 10:00:09 · 339 阅读 · 0 评论