![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 51
冰雪奇缘lb
这个作者很懒,什么都没留下…
展开
-
react hooks 中的 useEffect, useCallback, useMemo
useEffectuseEffect可以帮助我们在DOM更新完成后执行某些副作用操作,如数据获取,设置订阅以及手动更改 React 组件中的 DOM 等有了useEffect,我们可以在函数组件中实现 像类组件中的生命周期那样某个阶段做某件事情 (具有 componentDidMount,componentDidUpdate 和 componentWillUnmount 的功能)// 基本用法useEffect(() => { console.log('这是一个不含依赖数组的useEf原创 2022-05-07 17:44:51 · 1024 阅读 · 0 评论 -
redux 的使用
1. 安装 reduxnpm i redux2. 创建一个 Action在根目录下 (src) 创建一个文件夹action在该目录下创建一个index.js 文件,用来构建Actionconst sendAction = () => { ... };在 action 创建函数里面利用 return,返回一个 action 对象,注意需要携带 type 属性const sendAction = () => { return {type: "send action", v原创 2021-12-09 15:59:52 · 543 阅读 · 0 评论 -
Redux
ReduxRedux 是一个用于 JavaScript 状态容器,提供可与预测化的状态管理。Redux 可以让你构建一致化的应用,运行于不同的环境(客户端、服务器、原生应用),并且易于测试Redux 除了和 React 一起使用外,还支持其它界面库,而且它体小精悍(只有2kB)随着 JavaScript 单页面发开日趋复杂,JavaScript 需要管理更多的state(状态),这些 state 可能包括服务器响应、缓存数据、本地生成未持久化到服务器的数据,也包括UI状态等管理不断变化的原创 2021-12-09 10:11:20 · 454 阅读 · 0 评论 -
CSS IN JS —— CSS Moudules
CSS MoudulesCSS Modules 通过对 CSS 类名重命名,保证每个类名的唯一性,从而避免样式冲突的问题换句话说:所有类名都具有 “局部作用域” ,只在当前组件内部生效实现方式:webpack 的 css-loader 插件命名采用:BEM (Block块、Element元素、Modifier三部分组成)命名规范,比如:.list__item_active在 React 脚手架中演化成:文件名、类名、hash(随机)三部分,只需要指定 类名 即可CSS Modules原创 2021-12-07 16:24:50 · 938 阅读 · 0 评论 -
组件库 antd-mobile 的使用
组件库 antd-mobile打开 antd-mobile 的 文档安装:yarn add antd-mobile在 App.js 根组件中导入要使用的组件渲染组件在 index.js 中导入组件库样式原创 2021-12-03 17:18:52 · 1471 阅读 · 0 评论 -
react 路由
react 路由现代的前端应用大多都是 SPA(单页应用程序),也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器的压力更小,所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能,前端路由应运而生。前端路由的功能:让用户从一个视图(页面)导航到另一个视图(页面)前端路由是一套映射规则,在React中,是 URL路径 与 组件 的对应关系使用React路由简单来说,就是配置 路径 和 组件(配对)使用步骤安装:yarn add react-router-dom导原创 2021-12-03 11:17:44 · 139 阅读 · 0 评论 -
react 中 虚拟DOM 和 Diff算法
虚拟DOM 和 Diff算法React更新视图的思想是:只要state变化就重新渲染视图特点:思路非常清晰问题:组件中只有一个DOM元素需要更新时,也得把整个组件的内容重新渲染到页面中? 不是理想状态:部分更新,只更新变化的地方。问题:React 是如何做到部分更新的? 虚拟DOM配合Diff 算法虚拟DOM∶本质上就是一个JS对象,用来描述你希望在屏幕上看到的内容( UI)。执行过程初次渲染时,React会根据初始state ( Model ),创建一个 虚拟DOM对象(树)原创 2021-12-02 10:55:24 · 425 阅读 · 0 评论 -
react 组件性能优化
react 组件性能优化减轻state减轻state:只存储跟组件渲染相关的数据(比如: count/列表数据/ loading等)注意:不用做渲染的数据不要放在 state 中,比如定时器id等对于这种需要在多个方法中用到的数据,应该放在 this 中避免不必要的重新渲染组件更新机制:父组件更新会引起子组件也被更新,这种思路很清晰问题:子组件没有任何变化时也会重新渲染如何避免不必要的重新渲染呢?解决方式:使用 钩子函数shouldComponentUpdate(nextPro原创 2021-12-01 20:58:03 · 717 阅读 · 0 评论 -
react 中组件更新机制
react 中组件更新机制setState() 的两个作用:1.修改state 2.更新组件(UI)过程∶父组件重新渲染时,也会重新渲染子组件。但只会渲染 当前组件子树(当前组件及其所有子组件)原创 2021-12-01 16:16:23 · 407 阅读 · 0 评论 -
react 中 JSX 语法的转化过程
JSX 语法的转化过程JSX 仅仅是 createElement() 方法的语法糖(简化语法)JSX 语法被 @babel/preset-react插件 编译为 createElement() 方法React元素∶是一个对象,用来描述你希望在屏幕上看到的内容import React from "react";import ReactDOM from "react-dom";/* JSX 语法转化过程*/// const element = <h1 className=原创 2021-12-01 16:08:00 · 551 阅读 · 0 评论 -
react 中的 setState()
setState()setState() 是异步更新数据的注意:使用该语法时,后面的 setState() 不要依赖于前面的 setstate()可以多次调用setState() ,只会触发一次重新渲染this.state = { count: 1 }this.set state ({ count: this.state.count + 1})console. log(this.state.count) // 1推荐语法推荐:使用 setState((state, props原创 2021-12-01 15:28:09 · 134 阅读 · 0 评论 -
react 高阶组件
react 高阶组件概述目的:实现状态逻辑复用采用 包装(装饰)模式,比如说:手机壳手机:获取保护功能手机壳:提供保护功能高阶组件就相当于手机壳,通过包装组件,增强组件功能思路分析高阶组件 (HOC , Higher-Order Component )是一个函数,接收要包装的组件,返回增强后的组件高阶组件内部创建一个类组件,在这个类组件中提供复用的状态逻辑代码,通过prop将复用的状态传递给被包装组件 WrappedComponent使用步骤创建一个函数,名称约定以w原创 2021-12-01 14:40:05 · 739 阅读 · 1 评论 -
react 中 render-props 模式
React组件复用概述思考:如果两个组件中的部分功能相似或相同,该如何处理?处理方式:复用相似的功能(联想函数封装)复用什么? 1. state 2. 操作state的方法(组件状态逻辑)两种方式:1. render props 模式 2. 高阶组件(HOC)注意:这两种方式不是新的APl,而是利用React自身特点的编码技巧,演化而成的固定模式(写法)render props 模式思路:将要复用的state和操作state的方法封装到一个组件中问题1:如何拿到该组件中复用的s原创 2021-12-01 10:12:35 · 513 阅读 · 0 评论 -
react 组件的生命周期
react 组件的生命周期意义︰组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等组件的生命周期 ︰组件从被创建到挂载到页面中运行,再到组件不用时卸载的过程生命周期的每个阶段总是伴随着一些方法调用,这些方法就是生命周期的钩子函数。钩子函数的作用︰为开发人员在不同阶段操作组件提供了时机。只有 类组件 才有生命周期。生命周期的三个阶段每个阶段的执行时机每个阶段钩子函数的执行顺序每个阶段钩子函数的作用import React from "react"原创 2021-11-30 15:20:57 · 217 阅读 · 0 评论 -
react 中 props 校验
props1. children 属性children 属性∶表示组件标签的子节点。当组件标签有子节点时,props 就会有该属性children属性与普通的props一样,值可以是任意值(文本、React元素、组件,甚至是函数)children 使用方法示例:import React from "react";import ReactDOM from "react-dom";import './index.css'// children 属性const App = prop原创 2021-11-29 16:14:18 · 296 阅读 · 0 评论 -
react 中的 Context
思考:App 组件要传递数据给 Child 组件,该如何处理?处理方式:使用props一层层组件往下传递(繁琐)Context 作用:跨组件传递数据(比如:主题、语言等)使用步骤∶调用 React. createContext() 创建 Provider (提供数据) 和 Consumer(消费数据) 两个组件使用 Provider组件 作为父节点...原创 2021-11-29 14:36:45 · 309 阅读 · 0 评论 -
react 组件通讯的三种方式
父组件传递数据给子组件父组件提供要传递的 state 数据给子组件标签添加属性,值为 state 中的数据子组件中通过 props 接收父组件中传递的数据class Parent extends React.Component { state = { lastName: '王' } render() { return( <div style={{background:'red', padding:'20px'原创 2021-11-26 17:30:31 · 110 阅读 · 0 评论 -
react 组件中的 props
组件的props组件是封闭的,要接收外部数据应该通过 props 来实现props 的作用:接收传递给组件的数据传递数据:给组件标签添加属性接收数据︰函数组件通过 参数props接收数据,类组件通过 this.props 接收数据函数组件传值方式// propsconst Hello = (props) => { // props 是一个对象 const { name, age } = props return( <div>原创 2021-11-26 14:41:31 · 983 阅读 · 0 评论 -
react 表单 demo 代码练习
敲个demo:state、事件、表单的综合运用事件的复用封装对象属性的灵活取值 [属性(变量)]解构赋值的使用扩展运算符的使用import React from "react";import ReactDOM from "react-dom";import './index.css'// 抽离组件到独立的 JS 文件中class App extends React.Component { state = { comments: [原创 2021-11-26 11:01:17 · 611 阅读 · 0 评论 -
react 表单处理
受控组件HTML中的表单元素是可输入的,也就是有自己的可变状态而,React中可变状态通常保存在state中,并且只能通过setState()方法来修改React将state 与表单元素值value绑定到一起,由state的值来控制表单元素的值步骤:在state中添加一个状态,作为表单元素的value值(控制表单元素值的来源)给表单元素绑定 change 事件,将表单元素的值设置为 state 的值(控制表单元素值的变化)输入框举例:class App extends React原创 2021-11-24 21:56:09 · 314 阅读 · 0 评论 -
react 中 state 的基本使用
有状态组件和无状态组件函数组件又叫做 无状态组件,类组件又叫做 有状态组件状态( state )即 数据函数组件没有自己的状态,只负责数据展示(静)类组件有自己的状态,负责更新Ul,让页面“动”起来比如计数器案例中,点击按钮让数值加1。0和1就是不同时刻的状态,而由0变为1就表示状态发生了变化。状态变化后,UI也要相应的更新。React中想要实现该功能,就要使用有状态组件来完成。state的基本使用状态( state )即数据,是组件内部的私有数据,只能在组件内部使用state的值是原创 2021-11-24 17:46:06 · 3252 阅读 · 0 评论 -
react 的事件绑定和事件对象
事件绑定React 事件绑定语法与 DOM 事件语法相似语法:on+事件名称={事件处理程序},比如:onClick={0 => {}}注意:React事件采用 驼峰命名法 ,比如:onMouseEnter、onFocus类组件class App extends React.Component { handleClick() { console.log('单击事件触发啦~') } render() { return(原创 2021-11-24 15:24:48 · 573 阅读 · 0 评论 -
React 组件的两种创建方式
使用函数创建组件函数组件∶使用 JS 的函数(或箭头函数)创建的组件函数组件必须有返回值,表示该组件的结构,如果返回值为 null,表示不渲染任何内容组件名称必须以大写字母开头,React 据此区分组件和普通的 React 元素使用 函数名 作为组件标签名function Hello() { return ( <div>这是我的第一个函数组件</div> )}// 使用箭头函数创建组件// const Hello = () => <d原创 2021-11-23 21:06:25 · 451 阅读 · 0 评论 -
JSX的基本使用
JSX的基本使用JSX 是 JavaScript XML 的简写,表示在 JavaScript 代码中写 XML ( HTML)格式的代码优势:声明式语法更加直观、与 HTML 结构相同,降低了学习成本、提升开发效率使用步骤使用 JSX 语法创建 react 元素const title = <h1> hello JSX </h1>使用 ReactDom.render() 方法渲染 react 元素到页面中ReactDom.render(title, root原创 2021-11-23 14:52:09 · 351 阅读 · 0 评论 -
react.js的使用
建 index.html 文件命令行 npm init 生成 packge.json 文件命令行 npm i react react-dom引入react、react-dom,创建 react 元素, 渲染 react 元素<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi.原创 2021-11-23 11:11:43 · 438 阅读 · 0 评论 -
react脚手架配置代理
react脚手架配置代理方法一在package.json中追加如下配置"proxy":"http://localhost:5000"说明:优点:配置简单,前端请求资源时可以不加任何前缀。缺点:不能配置多个代理。工作方式:上述方式配置代理,当请求了3000不存在的资源时,那么该请求会转发给5000 (优先匹配前端资源)方法二第一步:创建代理配置文件在src下创建配置文件:src/setupProxy.js编写setupProxy.js配置具体代理规则:const p原创 2021-10-27 19:50:28 · 65 阅读 · 0 评论 -
虚拟DOM(vue、react)中key的作用
虚拟DOM中key的作用:(1) 简单的说: key 是虚拟 DOM 对象的标识,在更新显示时key起着极其重要的作用。(2) 详细的说:当状态中的数据发生变化时,react 会根据【新数据】生成【新的虚拟DON】 ,随后React进行【新虚拟 DOM 】与【旧虚拟 DOM 】的 diff 比较,比较规则如下: a.旧虚拟 DOM 中找到了与新虚拟 DOM 相同的 key: (1).若虚拟 DOM 中内容没变,直接使用之前的真实 DOM (2).若虚拟 DOM 中内容变了,则生成新的真实..原创 2021-10-25 14:39:25 · 371 阅读 · 0 评论 -
react脚手架中index.html的内容注释
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <!-- %PUBLIC_URL%代表public文件夹的路径 --> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <!-- 开启理想视口,用于做移动端网页的适配 --> <meta na原创 2021-10-25 14:33:08 · 531 阅读 · 0 评论