![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
Milk595
努力做自己喜欢做的事
展开
-
【Redux】subscribe的作用
subscribe的作用subscribe 这个函数是用来去订阅 store 的变化,比如你每次对 store 进行 dispatch(action) 都会触发 subscribe 注册的函数调用,这个在实际情况不是必须要的,看自己的应用场景,比如你想监控 store 的全局变化时 可以用 subscript 订阅一下,然后作一些反应每次通过dispatch 修改数据的时候,其实只是数据发生了变化,如果不手动调用 render方法,页面上的内容是不会发生变化的但是每次dispatch之后都手动调用很麻转载 2020-09-02 20:37:13 · 996 阅读 · 0 评论 -
【Redux】安装、要点、核心概念、三大原则
ReduxRedux 是 JavaScript 状态容器,提供可预测化的状态管理。安装npm install --save redux要点应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。 惟一改变 state 的办法是触发 action,一个描述发生什么的对象。为了描述 action 如何改变 state 树,你需要编写 reducers。例子import { createStore } from 'redux';/* 这是一个reducer,形式为原创 2020-09-02 12:38:35 · 142 阅读 · 0 评论 -
【React】15个常见问题解析!!!
1.在 React 组件的哪个生命周期函数中发起 AJAX 请求?在componentDidMount这个生命周期函数中发起 AJAX 请求。这样做你可以拿到 AJAX 请求返回的数据并通过 setState 来更新组件。2.怎样才能在 JSX 中编写注释?<div> {/* 注释写在这里 */} Hello, {name}!</div><div> {/* 多行注释 也同样有效。 */} Hello, {name}! </div原创 2020-08-11 15:05:17 · 324 阅读 · 0 评论 -
【React Hook】深入了解自定义Hook
自定义 Hook通过自定义 Hook,可以将组件逻辑提取到可重用的函数中。例子:聊天程序中的组件,该组件用于显示好友的在线状态import React, { useState, useEffect } from 'react';function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); useEffect(() => { function handleStatusChange(s翻译 2020-08-11 14:08:50 · 584 阅读 · 1 评论 -
【React Hook】一文让你彻底明白何为Effect Hook?
使用 Effect HookEffect Hook 可以让你在函数组件中执行副作用操作示例:import React, { useState, useEffect } from 'react';function Example() { const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => {翻译 2020-08-11 11:50:36 · 868 阅读 · 0 评论 -
【React Hook】一文让你彻底明白何为State Hook?
使用 State Hook下面的例子介绍了 Hook:import React, { useState } from 'react';function Example() { // 声明一个叫 "count" 的 state 变量 const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <but翻译 2020-08-11 10:21:33 · 326 阅读 · 0 评论 -
【React Hook】HooK简介与概览
HooK简介Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。import React, { useState } from 'react';function Example() { // 声明一个新的叫做 “count” 的 state 变量 const [count, setCount] = useState(0); return ( <div> <p>Yo翻译 2020-08-10 17:02:02 · 178 阅读 · 0 评论 -
【React 基础】常用知识点【复盘】
JSXJSX 是一个 JavaScript 语法扩展。它类似于模板语言,但它具有 JavaScript 的全部能力。JSX 最终会被编译为 React.createElement() 函数调用,返回称为 “React 元素” 的普通 JavaScript 对象。React DOM 使用 camelCase(驼峰式命名)来定义属性的名称,而不使用 HTML 属性名称的命名约定。例如,HTML 的 tabindex 属性变成了 JSX 的 tabIndex。而 class 属性则变为 className,这翻译 2020-08-10 14:01:55 · 165 阅读 · 0 评论 -
【React API】DOM 元素【注意事项】
DOM 元素在 React 中,所有的 DOM 特性和属性(包括事件处理)都应该是小驼峰命名的方式。例如,与 HTML 中的 tabindex 属性对应的 React 的属性是 tabIndex。例外的情况是 aria-* 以及 data-* 属性,一律使用小写字母命名。属性差异React 与 HTML 之间有很多属性存在差异:checked当 <input> 组件的 type 类型为 checkbox 或 radio 时,组件支持 checked 属性。你可以使用它来设置组件是否被选翻译 2020-08-10 11:30:18 · 146 阅读 · 0 评论 -
【React API】React.Component
概览React 的组件可以定义为 class 或函数的形式。如需定义 class 组件,需要继承 React.Component:class Welcome extends React.Component { render() { return <h1>hello,{this.props.name}</h1> }}在React.Component的子类中有个必须定义的render()函数。组件的生命周期每个组件都包含“生命周期方法”,你可以重写这些方法,以便翻译 2020-08-10 10:37:09 · 287 阅读 · 1 评论 -
【React API】几个常用API的简单介绍
React 顶层 APIReact 是 React 库的入口。如果你通过使用 <script> 标签的方式来加载 React,则可以通过 React 全局变量对象来获得 React 的顶层 API。当你使用 ES6 与 npm 时,可以通过编写 import React from 'react' 来引入它们。当你使用 ES5 与 npm 时,则可以通过编写 var React = require('react') 来引入它们。概览组件使用 React 组件可以将 UI 拆分为独立且复用的翻译 2020-08-09 22:46:59 · 1154 阅读 · 0 评论 -
【React高级指引】非受控组件
非受控组件在大多数情况下,我们推荐使用受控组件来处理表单数据。在一个受控组件中,表单数据是由 React 组件来管理的。另一种替代方案是使用非受控组件,这时表单数据将交由 DOM 节点来处理。要编写一个非受控组件,而不是为每个状态更新都编写数据处理函数,你可以使用ref来从 DOM 节点中获取表单数据。例子:使用非受控组件接受一个表单的值class NameForm extends React.Component { constructor(props) { super(props);翻译 2020-08-09 17:36:21 · 144 阅读 · 0 评论 -
【React高级指引】Render Props
Render Propsrender props: 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术具有 render prop 的组件接受一个函数,该函数返回一个 React 元素并调用它例子:class Cat extends React.Component { render() { const mouse = this.props.mouse; return ( <img src="/cat.jpg" style={{ po翻译 2020-08-09 15:56:34 · 102 阅读 · 0 评论 -
【React高级指引】Refs and the DOM
Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。创建 RefsRefs 是使用 React.createRef() 创建的,并通过 ref 属性附加到 React 元素。在构造组件时,通常将 Refs 分配给实例属性,以便可以在整个组件中引用它们。class MyComponent extends React.Component { constructor(props) { super(props); this.myRef =翻译 2020-08-09 14:02:21 · 135 阅读 · 0 评论 -
【React基础】4个注意事项!!class关键字定义React组件
定义 React 组件class Greeting extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}声明默认属性无论是函数组件还是 class 组件,都拥有 defaultProps 属性:class Greeting extends React.Component { // ...}Greeting.defaultProps = {翻译 2020-08-07 17:44:21 · 266 阅读 · 0 评论 -
【React高级指引】深入JSX
深入JSXJSX 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖。如下 JSX 代码:<MyButton color="blue" shadowSize={2}> Click Me</MyButton>会编译为:React.createElement( MyButton, {color: 'blue', shadowSize: 2}, 'Click Me')用户定义的组件翻译 2020-08-07 14:22:26 · 141 阅读 · 0 评论 -
【React高级指引】Fragments(碎片)
FragmentsReact 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组,而无需向 DOM 添加额外节点。render() { return ( <React.Fragment> <ChildA /> <ChildB /> <ChildC /> </React.Fragment> );}动机一种常见模式是组件返回一个子元素列表。以此 Reac翻译 2020-08-07 11:43:59 · 438 阅读 · 0 评论 -
【React高级指引】Context
Context 提供了一种在组件之间共享此类值的方式,而不必显式地通过组件树的逐层传递 props。何时使用 ContextContext 设计目的是为了共享那些对于一个组件树而言是“全局”的数据,例如当前认证的用户、主题或首选语言。举个例子,在下面的代码中,我们通过一个 “theme” 属性手动调整一个按钮组件的样式:class App extends React.Component { render() { return <Toolbar theme="dark" />;翻译 2020-08-07 10:51:02 · 115 阅读 · 0 评论 -
【React基础】何为组合?何为继承?
React 有十分强大的组合模式。我们推荐使用组合而非继承来实现组件间的代码重用。翻译 2020-08-06 13:53:57 · 160 阅读 · 0 评论 -
【React基础】何为状态提升?
状态提升通常,多个组件需要反映相同的变化数据,这时我们建议将共享状态提升到最近的共同父组件中去。子组件使用props获取数据,父组件使用state修改数据例子创建一个用于计算水在给定温度下是否会沸腾的温度计算器目标希望两个输入框内的数值彼此能够同步。当我们更新摄氏度输入框内的数值时,华氏度输入框内应当显示转换后的华氏温度,反之亦然。在 React 中,将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中,便可实现共享 state。这就是所谓的“状态提升”。接下来,我们将 Temp翻译 2020-08-06 10:55:10 · 193 阅读 · 0 评论 -
【React基础】表单
表单受控组件在 HTML 中,表单元素(如<input>、 <textarea> 和 <select>)之类的表单元素通常自己维护 state,并根据用户输入进行更新。而在 React 中,可变状态(mutable state)通常保存在组件的 state 属性中,并且只能通过使用 setState()来更新。我们可以把两者结合起来,使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React翻译 2020-08-05 17:50:40 · 126 阅读 · 0 评论 -
【React基础】条件渲染
条件渲染React 中的条件渲染和 JavaScript 中的一样,使用 JavaScript 运算符 [if]或者 条件运算符 去创建元素来表现当前的状态,然后让 React 根据它们来更新 UI。if else下面的示例中,我们将创建一个名叫 LoginControl 的有状态的组件。它将根据当前的状态来渲染 <LoginButton /> 或者 <LogoutButton />。同时它还会渲染上一个示例中的 <Greeting />。class LoginC翻译 2020-08-05 16:56:44 · 153 阅读 · 0 评论 -
【React基础】Key的作用
Keykey 帮助 React 识别哪些元素改变了,比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。const numbers = [1, 2, 3, 4, 5];const listItems = numbers.map((number) => <li key={number.toString()}> {number} </li>);一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串。通常,我们使用数据中的 id翻译 2020-08-05 16:48:26 · 240 阅读 · 0 评论 -
【React基础】事件处理
事件处理React 事件的命名采用小驼峰式(camelCase),而不是纯小写。使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串。例如,传统的 HTML:<button onclick="activateLasers()"> Activate Lasers</button>在 React 中略微不同:<button onClick={activateLasers}> Activate Lasers</button&翻译 2020-08-05 16:44:59 · 113 阅读 · 0 评论 -
【React基础】State & 生命周期
State & 生命周期本例子将封装可复用的 Clock 组件。它将设置自己的计时器并每秒更新一次。从封装时钟外观开始function Clock(props) { return ( <div> <h1>Hello, world!</h1> <h2>It is {props.date.toLocaleTimeString()}.</h2> </d翻译 2020-08-05 14:25:29 · 203 阅读 · 0 评论 -
【React基础】组件 & Props
组件 & Props组件允许你将 UI 拆分为独立可复用的代码片段,并对每个片段进行独立构思。组件,从概念上类似于 JavaScript 函数。它接受任意的入参(即 “props”),并返回用于描述页面展示内容的 React 元素。函数组件与 class 组件定义组件方式一:函数组件function Welcome(props) { return <h1>Hello, {props.name}</h1>;}该函数是一个有效的 React 组件,因为它接收唯翻译 2020-08-04 18:39:43 · 183 阅读 · 0 评论 -
【React基础】元素渲染
元素渲染元素描述了你在屏幕上想看到的内容。将一个元素渲染为 DOM<div id="root"></div>“根” DOM 节点,该节点内的所有内容都将由 React DOM 管理要将一个 React 元素渲染到根 DOM 节点中,只需把它们一起传入ReactDOM.render():const element = <h1>Hello, world</h1>;ReactDOM.render(element, document.getElemen原创 2020-08-04 18:36:01 · 158 阅读 · 0 评论 -
【React基础】列表渲染
1.react列表渲染 map()<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="node_modules/r原创 2020-08-04 10:44:14 · 242 阅读 · 0 评论 -
【React基础】jsx语法进阶使用
1.使用表达式、计算<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="node_modules/react/umd/react.development.js"></script>原创 2020-08-04 09:55:33 · 157 阅读 · 0 评论 -
【React基础】jsx的基础使用
1.注释<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="node_modules/react/umd/react.development.js"></script> <sc原创 2020-08-03 18:41:13 · 98 阅读 · 0 评论 -
【React基础】基本环境搭建
react的基本概念React是Facebook开发出的一款JS库 Facebook认为MVC无法满足他们的扩展需求特点:react不使用模板react不是一个mvc框架响应式react是一个轻量级的js库原理:虚拟DOM react把DOM抽象成为一个JS对象diff算法1.虚拟DOM确保只对界面上真正发生变化的部分进行实际的DOM操作2.逐层次的来进行节点的比较react 2013年发布react 开发环境的搭建引入:react.js 核心文件react-do原创 2020-08-03 18:14:44 · 179 阅读 · 0 评论 -
【React基础】npm ERR! Refusing to install package with name “react“ under a package
项目安装依赖react时 报错:原因是初始化package.json文件时,name名为react,只要name值和项目安装的依赖名不一致即可原创 2020-08-03 17:09:48 · 673 阅读 · 0 评论