若水弹丸之地

高阶组件的定义类比于高阶函数的定义：高阶函数的定义：接收函数作为输入，输出另一个函数的一类函数，被称作高阶函数。高阶组件的定义：接受React组件作为输入，输出一个新的React组件的组件。高阶组件本质上也是一个函数，并不是一个组件，这一点一定不要弄错。更通俗地描述为，高阶组件通过包裹（wrapped）被传入的React组件，经过一系列处理，最终返回一个相对增强（enhanced...

一、片段(fragments)片段(fragments) 可以让你将子元素列表添加到一个分组中，并且不会在DOM中增加额外节点。1、片段长什么样？render() { return ( <React.Fragment> <ChildA /> <ChildB /> <ChildC />...

在常规的 React 数据流中，props 是父组件与子组件交互的唯一方式。要修改子元素，你需要用新的 props 去重新渲染子元素。然而，在少数情况下，你需要在常规数据流外（冲出 React 虚拟 DOM 的限制）强制修改子元素(被修改的子元素可以是 React 组件实例，或者是一个 DOM 元素)，在这种情况下，React 提供了Refs来解决。简单说就是： 在从 render 方法中返...

React 组件有很多种分类方式，常见的分类方式有函数组件和类组件，无状态组件和有状态组件，展示型组件和容器型组件。真正理解它们还是对开发有很大益处的。1、 函数组件和类组件划分依据是根据组件的定义方式。例：下面的两种写法等价//函数式组件function MyComponent(props){ return <h1>Hello,{props.name...

受控组件(Controlled Components)在 HTML 中，表单元素如 < input>，< textarea> 和 < select> 表单元素通常保持自己的状态，并根据用户输入进行更新。在 React 中，可变状态一般保存在组件的 state(状态) 属性中，并且只能通过 setState() 更新。我们可以通过使 React 的 ...

首先，回顾一下在 JavaScript 中如何转换列表。给定下面代码，我们使用 map() 函数使 numbers 数组中的元素值翻倍const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map((number) => number * 2);console.log(doubled);输出： [2, 4, 6, 8...

React 中的条件渲染就和在 JavaScript 中的条件语句一样。通过 JavaScript 条件操作符(如 if ) 根据不同的条件 来决定创建渲染不同的元素，并且让 React 更新匹配的 UI 。仔细阅读代码，你会发现这一章对你收获最大的是怎么让代码写的更简单优雅。一、怎么用看下面dome就懂了,顺便看看我们 在多个页面写react 与 在一个页面写react的区别...

React ：元素构成组件，组件又构成应用。 React核心思想是组件化，其中 组件 通过属性(props) 和 状态(state)传递数据。一、React 元素 与 DOM 元素 事件处理区别（1）命名：React 事件使用驼峰命名，而不是全部小写 （2）写法上： HTML里：<!-- onclick里c小写,用引号包围内容(想想JSX怎么包裹变...

React ：元素构成组件，组件又构成应用。 React核心思想是组件化，其中 组件 通过属性(props) 和 状态(state)传递数据。首先看个实例写法一：函数式组件function Clocks(props){ return <div>time is : {props.date.toLocaleTimeString()}</div&g...

一、什么是生命周期？生命周期就是指一个对象的生老病死。而组件的生命周期则是这个组件从创建到销毁的一个过程。在这个过程中会有不同的阶段，从而会产生一些对应的生命周期函数来供我们使用，以便能够进行一些渲染、更新等处理。 react的生命周期可以分为三个阶段：初始化（挂载）存在期（更新）销毁 （卸载）在源码里对应的就是MOUNTING、RECEIVE_PROPS、UNMOU...

所谓 状态提升 就是将各个子组件的 公共state 提升到它们的父组件进行统一存储、处理（这就是所谓的”单一数据源“），然后再将父组件处理后的数据或函数props到各子组件中。那么如果子组件 要 修改父组件的state该怎么办呢？我们的做法就是 将父组件中负责setState的函数，以props的形式传给子组件，然后子组件在需要改变state时调用即可。下面实例场景 是 我看官方文档后...

React ：元素构成组件，组件又构成应用。 React核心思想是组件化，其中 组件 通过属性(props) 和 状态(state)传递数据。State 与 Props 区别props 是组件对外的接口，state 是组件对内的接口。组件内可以引用其他组件，组件之间的引用形成了一个树状结构（组件树），如果下层组件需要使用上层组件的数据或方法，上层组件就可以通过下层组件...

React ：元素构成组件(复杂的组件由多个组件构成)，组件又构成应用。 React核心思想是组件化，其中 组件 通过属性(props) 和 状态(state)传递数据。一、什么是组件？React通过组件的思想，将界面拆分成一个个可复用的模块，每一个模块就是一个React 组件。一个React 应用由若干组件组合而成，一个复杂组件也可以由若干简单组件组合而成。React 组件...

React ：元素构成组件，组件又构成应用。一、什么是React元素？React 元素就是 普通的js对象 (俗称:虚拟DOM) 。 React 元素不是真实的 DOM 元素，所以也没办法直接调用 DOM 上原生的 API。 渲染过程：React元素 描述 虚拟DOM，再根据 虚拟DOM 渲染出 真实DOM。 1、虚拟 DOM ：就是用 js 对象结构模拟出 h...

什么是JSX？（1）JSX 是 JavaScript 的一种扩展语法。它具有 JavaScript 的全部能力。 （2）JSX 可以生成 React “元素”。 （3）JSX 也是一个表达式。特别在编译之后，JSX 表达式就变成了常规的 JavaScript 对象。从本质上讲，JSX 只是为 React.createElement(component, props, …children...