随笔分类 - React
You can do it.
摘要:可以少去理解一些不必要的概念,而多去思考为什么会有这样的东西,它解决了什么问题,或者它的运行机制是什么? 1. 弹性盒子布局概念 Flex 是 Flexible Box 的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。比如: .box{ displ
阅读全文
摘要:人在身处逆境时,适应环境的能力实在惊人。人可以忍受不幸,也可以战胜不幸,因为人有着惊人的潜力,只要立志发挥它,就一定能渡过难关。 Hooks 是 React 16.8 的新增特性。它可以让你在不编写 class 组件的情况下使用 state 以及其他的 React 特性。 React Hooks 表
阅读全文
摘要:求上进的人,不要总想着靠谁,人都是自私的,自己才是最靠得住的人。 React 中生命周期划时代几个节点,React 16.2 之前处于老的生命周期,之后提出了新的生命周期。而函数式组件在 React 16.8 之前是没有状态和生命周期的,在 React 16.8 版本通过引入 Hooks 使得函数式
阅读全文
摘要:人生的游戏不在于拿了一副好牌,而在于怎样去打好坏牌,世上没有常胜将军,勇于超越自我者才能得到最后的奖杯。 1. 父子组件通信方式 1.1 父组件传递到子组件 直接通过属性进行传递,数据的传递可以提高组件的复用性。 1.2 子组件传递到父组件 通过回调函数(callback)来实现。 ref 标记:父
阅读全文
摘要:只有不断学习和成长,才能适应这个快速变化的世界。 1. 懒加载 1.1 React 懒加载 React 中懒加载 Lazy 与 Suspense 需要搭配使用。 React.lazy 定义: React.1azy 函数能让你像渲染常规组件一样处理动态引入的组件。其实就是懒加载。 为什么代码要分割?
阅读全文
摘要:无论你做什么,都要相信自己可以做到,因为你的潜力是无限的。 把父组件的状态变成属性传递给子组件,子组件接受这个属性,听命于父组件。这个子组件就是叫做受控组件。在受控与非受控组件有两种理解方案,第一:狭义上的受控与非受控,就是我们在表单中的受控与非受控组件。第二:广义上的受控与非受控组件,就是 Rea
阅读全文
摘要:不要因为别人的评价而改变自己的想法,因为你的生活是你自己的。 1. React 中 Ref 的应用 1.1 给标签设置 ref 给标签设置 ref,ref="username", 通过 this.refs.username 可以获取引用的标签,ref 可以获取到应用的真实 Dom 节点。但是 thi
阅读全文
摘要:不要问自己需要什么样的人生,而要问自己想要成为什么样的人。 我们从前面的学习知道一个 React 组件不仅仅只包含 DOM 结构的,还应该样式和 Javascript 逻辑的。这里我们认识逻辑构造之事件处理。 1. React 事件处理 这里列举了在 React 中事件的几种绑定处理方式: impo
阅读全文
摘要:
如果你想要实现自己的梦想,就必须先拥有勇气去追求它。 1. React Props 属性 props 主要解决两个问题:复用性问题以及可以让组件之间通信。 属性 props 正常是外部传入的,组件内部也可以通过一些方式来初始化的设置,属性不能被组件自己更改(属性是描述性质、特点的,组件自己不能随意更
阅读全文

摘要:
没有什么是不可能的,只是需要找到正确的方法。 1. 什么是状态? 状态就是组件内部特有数据的载体(组件数据挂载方式),改变数据页面就会刷新,由组件自己设置和更改,也就是说由组件自己产生、维护,使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理),这在 React 中称为:条件渲染。 为什
阅读全文

摘要:
无论你的梦想有多么高远,记住,一切皆有可能。 我们从前面的学习知道一个 React 组件不仅仅只包含 DOM 结构的,还应该样式和 Javascript 逻辑的。这里我们学习下如何构建 CSS 样式。 1. 逻辑表示 JSX 中使用大括号语法来包裹 JS 表达式(简单逻辑代码)。例如: { 1 +
阅读全文

摘要:
所谓天才,就是努力的力量。 React 组件由 DOM 结构,样式和 Javascript 逻辑组成。 1. ES6 中的类 class People { constructor() { this.name = "hubert" this.age = 29 } printName() { conso
阅读全文

摘要:
可以少去理解一些不必要的概念,而多去思考为什么会有这样的东西,它解决了什么问题,或者它的运行机制是什么? 一. 环境搭建 工作编辑器:Visual Studio Code。 Javascript 解析器、运行环境 Node.js 的安装。 npm 安装:npm 是 Node.js 的软件包管理器。
阅读全文

摘要:
可以少去理解一些不必要的概念,而多去思考为什么会有这样的东西,它解决了什么问题,或者它的运行机制是什么? 1. React 中导出和导入 1.1 ES6 解析 ES6 的模块化的基本规则或特点: 每一个模块只加载一次, 每一个 JS 只执行一次, 如果下次再去加载同目录下同文件,直接从内存中读取。一
阅读全文

摘要:
可以少去理解一些不必要的概念,而多去思考为什么会有这样的东西,它解决了什么问题,或者它的运行机制是什么? JS JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 https://www.runoo
阅读全文

摘要:可以少去理解一些不必要的概念,而多去思考为什么会有这样的东西,它解决了什么问题,或者它的运行机制是什么? React 1. React 起源和发展(是什么?) React 是用于构建用户界面的 JavaScript 库,起源于 Facebook 的内部项目,该公司对市场上所有 JavaScript
阅读全文