随笔分类 -  React

notes for React
深入学习 Redux 之中间件与异步操作
摘要：上一节，学习了 Redux 的基本用法：用户发出 Action，Reducer 函数算出新的 State，View 重新渲染。 但有一个关键问题没有解决：异步操作怎么办？Action 发出以后，Reducer 立即算出 State，这是同步；Action 发出以后，过一段时间再执行 Reducer， 阅读全文
posted @ 2021-06-18 22:57 Leophen 阅读(151) 评论(0) 推荐(0)
深入学习 Redux 之基础用法
摘要：一、设计思想 ① Web 应用是一个状态机，视图与状态是一一对应的。 ② 所有的状态，保存在一个对象里面。 二、基本概念和 API 1、Store Store 是保存数据的地方，可以把它看成一个容器。整个应用只能有一个 Store。 Redux 提供 createStore 这个函数来生成 Stor 阅读全文
posted @ 2021-06-12 22:56 Leophen 阅读(210) 评论(0) 推荐(0)
React Hooks
摘要：一、React 的两套 API 以前，React API 只有一套，现在有两套：类（class）API 和基于函数的钩子（hooks） API。 任何一个组件，可以用类来写，也可以用函数来写。 1、类组件 class Welcome extends React.Component { render( 阅读全文
posted @ 2021-05-26 22:16 Leophen 阅读(812) 评论(0) 推荐(0)
深入理解 React setState
摘要：一、为什么使用 setState React 修改 state 方法有两种： 1、构造函数里修改 state ，只需要直接操作 this.state 即可， 如果在构造函数里执行了异步操作，就需要调用 setState 来触发重新渲染。 2、在其余的地方需要改变 state 的时候只能使用 setS 阅读全文
posted @ 2021-05-20 22:34 Leophen 阅读(528) 评论(0) 推荐(0)
React 函数组件和类组件的区别
摘要：函数组件和类组件有什么不同，在编码过程中应该如何选择呢？ 一、什么是函数组件 定义一个组件最简单的方式就是使用 JavaScript 函数： import React from 'react' const Welcome = (props) => { return <h1>welcome, {pro 阅读全文
posted @ 2021-05-15 22:23 Leophen 阅读(1144) 评论(0) 推荐(0)
React TS 解决不声明变量类型时的报错问题
摘要：使用 TypeScript 的 React 项目中，变量如果没有声明任何类型，会被识别为 any，此时编译器会报错，要求强制给变量声明类型 这里可以通过设置配置文件，使编译器在这种情况下不报错，从而实现 TS 和 JS 的混合编写↓↓ 在 React 项目中的 tsconfig.json 文件里， 阅读全文
posted @ 2021-05-08 22:40 Leophen 阅读(874) 评论(0) 推荐(0)
JSX onClick 和 HTML onclick 的区别
摘要：在 JSX 中可以通过 onClick 这样的方式给一个元素添加一个事件处理函数，当然，在 HTML 中也可以用 onclick (小写 c)，但在 HTML 中直接书写 onclick 一直就是为人垢病的写法，网页应用开发界一直倡导的是用 jQuery 的方法添加事件处理函数，直接写 onclic 阅读全文
posted @ 2021-05-06 22:33 Leophen 阅读(573) 评论(0) 推荐(0)
React 使用 react-router-dom 配置路由
摘要：一、什么是 react-router-dom React-router-dom 提供了 BrowserRouter，Route，Link 等 api，我们可以通过 dom 的事件控制路由 二、react-router-dom 的安装 在项目根目录终端引入： npm install react-rou 阅读全文
posted @ 2019-08-13 16:48 Leophen 阅读(2487) 评论(0) 推荐(0)
React使用axios请求并渲染数据
摘要：一、什么是 axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中 二、axios 的安装 1、在项目根目录终端引入： npm isntall --save axios 2、在使用 axios 的 js 文件中加入： import axios fr 阅读全文
posted @ 2019-08-13 02:29 Leophen 阅读(5701) 评论(0) 推荐(0)
React组件库Ant Design的安装与使用
摘要：一、什么是 Ant Design 1、Ant Design 提炼自企业级中后台产品的交互语言和视觉风格 2、Ant Design 使用 TypeScript 构建，提供完整的类型定义文件 二、Ant Design 的安装 1、在项目根目录终端引入： npm install antd --save 2 阅读全文
posted @ 2019-08-10 19:11 Leophen 阅读(6723) 评论(0) 推荐(0)
React 生命周期函数
摘要：React 生命周期图示 一、组件挂载阶段（Mounting） 1、componentDidMount() 在组件创建好 dom 元素后，挂载进页面时调用 二、组件更新阶段（Updating） 1、static getDerivedStateFromProps() 2、shouldComponent 阅读全文
posted @ 2019-08-10 17:33 Leophen 阅读(297) 评论(0) 推荐(0)
关于 React Refs
摘要：一、什么是 ref React 提供了 ref 属性，用来对元素进行 DOM 操作 二、使用 ref 的方式 1、字符串模式 绑定 ref 属性 XX，通过 this.refs.XX 获取 字符串模式不支持静态类型检测，且 React 不建议使用 2、回调函数模式 在 ref 属性中设置回调函数，通 阅读全文
posted @ 2019-08-09 13:16 Leophen 阅读(154) 评论(0) 推荐(0)
React中的State与Props
摘要：一、State 1、什么是 state 一个组件的显示形态可以由数据状态和外部参数决定，其中，数据状态为 state，外部参数为 props 2、state 的使用 组件初始化时，通过 this.state 给组件设置一个初始的 state，在第一次 render 时就会用这个数据渲染组件 3、se 阅读全文
posted @ 2019-08-08 22:46 Leophen 阅读(502) 评论(0) 推荐(0)
React组件的定义、渲染和传值总结
摘要：一、组件的定义 1、使用JavaScript函数定义 Welcome.js 2、使用 ES6 class 定义 Welcome.js 二、组件的渲染 index.js 文件： 三、复合组件 1、通过创建多个组件来合成一个组件 2、渲染合成的组件 运行结果： 四、组件之间的传值 1、父组件传给子组件 阅读全文
posted @ 2019-08-07 20:43 Leophen 阅读(595) 评论(0) 推荐(0)
关于JSX的优点
摘要：一、什么是 JSX JSX 是一种 JavaScript 的语法扩展 一个简单的 JSX： 二、使用 JSX 的优点 1、JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化 2、JSX 是类型安全的，在编译过程中就能发现错误 3、使用 JSX 编写模板更简单快速 阅读全文
posted @ 2019-08-07 19:07 Leophen 阅读(2630) 评论(0) 推荐(0)
使用 create-react-app 快速构建 React 开发环境
摘要：在终端执行以下命令创建项目： 1、指定创建的项目位置（这里以桌面为例） 2、创建 React 项目 3、进入项目并启动 可以直接将项目文件拖入终端，输入 npm start 按回车启动 阅读全文
posted @ 2019-08-07 18:27 Leophen 阅读(235) 评论(0) 推荐(0)
使用React.Fragment替代render函数中div的包裹
摘要：1、在 React 中，render 函数中 return 的内容只能有一个根节点，如果多个元素嵌套，需要用一个标签元素包裹 这个包裹的标签通常用 div，示例如下： 此时 #root 下的结构： 2、如果不加 div，会报错 示例如下： 3、不加 div 的解决办法：用 React.Fragmen 阅读全文
posted @ 2019-08-07 17:55 Leophen 阅读(602) 评论(0) 推荐(0)