qq_19249021的博客

react-router-dom v6 跳转到顶部

React Hooks 18 effect执行多次的解决方案

Redux 通俗来讲就是一个组件状态管理器。由于大型项目之间组件难免会发生一些通信关系。例如：父子组件、兄弟组件、也可能毫无关系的两个组件之间通信。如果不采用状态管理器就会使代码逻辑混乱，一团乱麻，异常难维护。这个时候就需要 Redux 上场了。但是，对于简单的项目来说，运用Redux就没必要了。一： 设计思想Redux 的设计思想很简单，就两句话：Web应用是一个状态机， 视图与状态是一一对应的。所有的状态，保存在一个对象里面。二：Redux工作流程初看这张图可能会一脸懵逼，不过没关.

一个完整的项目离不开数据请求，JavaScript中可以使用ajax远程请求，但是对于SPA项目来说写起来太麻烦，所以本节将介绍如何使用请求框架Axios来实现。Vue项目也可以使用它来用做请求框架。1. 安装AxiosAxios可以使用npm来安装，可以直接在根目录下，打开Git Bash Here，弹出命令窗口中输入： npm install --save axios然后，只需要等它自动下载完成就好了。关于 npm install --save 和 npm install --save.

通过上一节，对于React生命周期有了新认识，如何利用它来提高组件的性能呢？本节将会抛砖引玉讲解一个小例子。为了代码的清晰，可以删除上一节一些无关的生命周期函数代码。1. ChildItem.js存在性能问题那就是：子组件ChildItem.js频繁无用渲染render。很多情况下会忽略这个问题，但是软件的卡顿是一点点产生的，所以必须要减少性能消耗。解决方式直接在ChildItem.js中加入如下代码 shouldCompnentUpdate() { return false.

本节主要讲React中非常重要的知识点：生命周期。1. React生命周期图通过这张图，可以看到React生命周期的四大阶段：Initialization： 初始化阶段Mounting：挂载阶段Updation： 更新阶段Unmounting： 销毁阶段2. 什么是生命周期函数？一句话概括：生命周期函数指在某一时刻组件会自动调用执行的函数举例说明：在Child,js组件中。里面的render()函数。就是一个生命周期函数它在state发生改变时自动执行。这就是一个标准的自动执行函.

在编写组件的方法时，经常会遇到语义化很模糊的代码，这对于团队开发是一个很大问题，因为review代码或者合作时都会影响开发消息。ref在react中就是一个语义化代码的工具。1. 替代原来的 e.target.value以前的案例中，写下面的代码，使用了 e.target，这并不直观，也不好看。这种情况其实可以使用ref来进行解决。 inputChange(e){ this.setState({ inputValue: e.target.value }) }如果以上代码使用r.

日常开发中，父组件向子组件传值时，使用了属性的方式，也就是props。这种方式传值在大型项目中，如果不对其进行校验，后期会变的异常混乱，业务逻辑也没法保证。1. PropTypes的简单使用在Child.js组件里传递了4个值，有字符串，有数字，有方法，这些都是可以使用PropTypes限制的。使用之前必须引入一下PropTypes。import PropTypes from 'prop-types'引入后，就可以在组件的下方进行使用了，需要注意的是在子组件ChildItem.js的最下面，写.

本节主要介绍一些理论性的东西：如 React单向数据流、React和其他框架一起使用和函数式编程。1. 单向数据流React的特性中有一个概念叫单向数据流。可以用上几节的Demo来说一下何为单向数据流。Child.js中修改为如下代码. <ul> { this.state.list.map((item, index) => { return ( <Child key = {item + index} content = {.

本节将介绍React中父子组件如何传值的方法。1. 父组件向子组件传值目前最简单，最实用，最容易伤手的方法。就是实用组件属性的形式父组件给子组件传值。例如：在ChildItem组件中加入content属性，然后给属性传递{item}，这样就可以父组件向子组件传值。 <ChildItem content = {item} />此时，父组件值已经传递给子组件，子组件这时候可以使用...

本节将介绍拆分简单组件的知识。实际开发中。一个大功能可能会分成不同的组件，比如把文本框和按钮单独一个组件，下面的list列表单独一个组件。这涉及到了一部分组件拆分的知识。1. 新建子组件在src目录下，新建一个文件叫ChildItem.js，然后写好基础结构。 import React, { Component } from 'react' class ChildItem extends Component { render() { return ( <li>项目.

通过之前几节的学习。基本上已经算是React初级入门了。这节课主要是关于JSX的几个坑。1. JSX代码注释之前第一次写JSX注释，是这样写的。结果会报错 <Fragment> // 我是注释我是注释， 这个是错误示范 <div> ..... 省略其他代码 <input /> </div> </Fragment>正确的方式应该如下： <Fragment> {/* 正确注释的 */} &.

本节将介绍列表循环时删除其中某项需求是这样的：点击已经有的选项时，可以进行删除。1. 数组下标的传递需要删除其中某项，那么首先就要知道当前点击项的index，也就是下标，然后绑定一个事件。代码如下： // 省略部分代码 <ul> { this.state.list.map((item, index) => { // 此处如果return后面只有一行的话就不需要写括号，如果需要换行就必须写括号 return ( <li ke.

本节主要介绍React中列表循环展示数据以及事件的绑定。1. 列表循环数据化目前Child.js组件中的<li>标签内的数据是静态的，也就是死的。如果要换成动态的。就需要把这个列表进行数据化之后再用JavaScript代码循环在页面上。首先，在上一节中。定义过了一个空的list数组。这节课先把list数组添加两个数组元素。代码如下： // 省略上面部分无关代码 constructor(props) { super(props) this.state = { input.

本节主要介绍React中的响应式设计和数据绑定的方法。jQuery和React的区别jQuery以事件驱动，原理是通过事件的触发来操作DOM改变页面。React 以数据驱动，为单向数据流，通过监测数据变化来完成页面的改变。1. 响应式设计和数据的绑定React不建议直接操作DOM元素，而是通过数据进行驱动，改变页面的效果。React会根据数据的变化，自动的帮助你完成页面的改变。所以在写React时，无需关注DOM等相关操作，只需要关注数据的操作就可以了。在上一节，已经编写好了Child..

本节将写一个TodoList组件的基础框架。CSS部分将忽略。1. 新建TodoList组件在src目录下，新建一个文件Child.js文件，然后写一个基础的HTML结构。代码如下： import React, { Component } from 'react' class Child extends Component { render() { return ( <div> <div> <input /> .

上一节其实已经涉及到了一些JSX语法，看起来和HTML标签几乎一样。本节将简单的介绍React中JSX的使用。1. JSX简介JSX 是 JavaScript 和 XML 结合的一种格式。由 React 发明。它的作用是方便利用 HTML 语法来创建虚拟DOM，当遇到<，JSX就当做HTML解析，遇到{就当JavaScript解析。另一方面在React中可以简化代码。下面是一段简单的JSX语法。<ul className = 'list'> <li>text1.

万物起源Hello World~本节开头可以先将src文件夹的文件全部删除，然后通过以下步骤写一个Hello World程序。这个编写过程可以更直观的了解什么是组件化(模块化)编程。1. 入口文件编写一个项目，一般从入口文件开始编写，本项目中在src目录下新建一个index.js，然后打开它，开始我们的React之旅。写入如下代码： // 引入React文件 import React from 'react' // 引入React-dom文件包 import ReactDOM from .

脚手架生成目录之后，需要对目录有一些基本认知。本节将讲述React脚手架生成目录和文件的作用。1. 项目根目录的文件注：版本不同可能导致目录文件不同。我自己的脚手架版本为：3.4.1。需要查询自己版本号在终端里面输入如下代码： create-react-app -VREADME.md 该文件作用是对项目的说明。默认有写入内容。也可以删除里面文字自定义一些内容，该文件可以使用Markdown语法来编写。package.json 该文件是webpack配置和项目包管理文件，项目中依赖的第三方包.

React的使用方式有两种：CDN引入页面 (即最原始的<script>引入在HTML页面中)利用脚手架进行安装脚手架需要搭建React环境必须先安装Node。如果你已经安装了可以省略这些步骤。利用<script>引入在HTML页面中在此不再赘述. 本章主讲脚手架安装1. 安装Node.js安装Node需要进入Node官方网站中。进行相应版本的下载，然后双击安装就行了。Node中文网址：http://nodejs.cn一定要下载对应版本。否则没法使用。N.

// 几种安装方式的区别// 1. 安装到项目目录node_module。不会添加任何依赖。(不会写入package.json)npm install axios// 2. 安装到全局。磁盘目录为配置的npm config prefix处npm install -g axios// 3.4 一样.安装到项目目录node_modules。添加依赖(写入package.json)。添加依赖的作用是：比如项目上传到git中。其他成员下载项目时会直接下载依赖中有的插件// 3. 生产环境下载的包。.