React
关注
分享
扫一扫
夹心776655
这个作者很懒，什么都没留下…
展开
-
React中的受控组件与非受控组件
React中的受控组件与非受控组件原创 2024-03-26 23:19:34 · 484 阅读 · 0 评论 -
【项目搭建】项目搭建与开发
正确的项目启动思路软件开发流程软件需求设计规范功能性需求:用户可以打开网站顶部导航栏、走马灯、热门推荐等等2.非功能性需求：网站使用React + Typescript代码逻辑清晰创建ts项目在typescript中，类型的定义我们需要使用 .d.ts 为后缀的文件来表示，.d.ts 是typescript专用的声明类型的文件，这个文件只包含类型声明，它不会包含任何逻辑。不会被编译、也不会被webpack打包。打开src文件夹，创建一个名叫 custom.d.ts 的文件原创 2021-09-26 09:06:50 · 328 阅读 · 0 评论 -
【React】之Hooks
什么是钩子（hooks）消息处理的一种方法, 用来监视指定程序函数组件中需要处理副作用，可以用钩子把外部代码“钩”进来常用钩子：useState, useEffect, useContext, useReducerHooks一律使用use前缀命名：useXXX类组件函数组件一类特殊的函数，为你的函数式组件注入特殊的功能为什么创造Hooks有些类组件冗长且复杂，难以复用结局方案：无状态组件与HOC(高阶组件)，但还是存在诸多问题无状态组件无法访问异步API, 无法进行更新HO原创 2021-09-25 22:57:26 · 278 阅读 · 0 评论 -
【React】State和Props
State与Props1、props是组件对外的接口, 而state是组件对内的接口2、props用于组件间的数据传递, 而state用于组件内部的数据传递3、state是私有的，可以认为state是组件的“私有属性”4、用 setState() 修改 State用 setState() 修改StateonClick = {() => { this.setState( {isOpen: !this.state.isOpen} )}}初始化// 生命周期第一阶段：初始化//原创 2021-09-06 08:59:10 · 122 阅读 · 0 评论 -
【React】异步处理-获取网络API数据与react组件生命周期
处理异步、动态显示ajaxcallback回调函数程序栈stack, 先进后出原创 2021-09-05 17:36:29 · 396 阅读 · 0 评论 -
【React】React Event事件处理
React事件处理<button className = {styles.button} onClick = {(e) => { this.setState({ isOpen: !this.state.isOpen }); }}> 购物车2件</button> 给any添加自动映射tsconfig.json{ "compilerOptions": { "noImplicitAny": false }}添加事件处理函原创 2021-09-01 09:16:29 · 738 阅读 · 1 评论 -
【React】子组件向父组件传值
React子组件如何向父组件传值？可以在父组件中创建一个方法，将其传递给子组件，并在每次子状态更改时从props调用它，并将状态保留在子组件中代码案例子组件：import React, { useState } from "react";function EnhancedTable({parentCallback}) { const [count, setCount] = useState(0) const clickCount = () => { cons原创 2021-08-20 08:26:07 · 848 阅读 · 0 评论 -
【React.js】之 React-router
React-routerhash 模式（默认），如 http://abc.com/#/user/10H5 history 模式， 如 http://abc.com/user/20后者需要 server 端支持，因此无特殊需求可选择前者路由配置（动态路由、懒加载）原创 2021-08-06 09:08:46 · 166 阅读 · 0 评论 -
【HTML+CSS】之CSS布局
常用布局方式table 表格布局float 浮动 + margininline-block 布局flexbox布局1.flexbox 布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp原创 2021-08-06 08:47:07 · 505 阅读 · 0 评论 -
【React.js】之性能优化
React 性能优化SCU 默认返回true, 即 React 默认重新渲染所有组件必须配合 “不可变值” 一起使用可先不用SCU, 有性能问题时再考虑使用ShouldComponentUpdateshouldComponentUpdate(nextProps, nextState) { if(nextState.count !== this.state.count) { return true // 可以渲染 } return false // 不重复渲染}代码案例原创 2021-07-25 17:14:21 · 162 阅读 · 1 评论 -
【前端自动化框架】Jest
Jest性能功能易用性jest框架速度快，api简单，易配置，隔离性好，监控模式，IDE整合，Snapshot, 多项目并行，覆盖率，Mock丰富jest帮助我们完成单元测试(模块测试)、集成测试(多个模块测试)安装jestnpm install jest@24.8.0 -D测试jestpackage.json"scripts": { "start": "react-scripts start", "build": "react-scripts build",原创 2021-07-07 00:31:07 · 192 阅读 · 0 评论 -
【React.js】之异步组件
异步组件import()React.lazyReact.Suspense代码实例import React from 'react'const ContextDemo = React.lazy(() => import('./ContextDemo'))class App extends React.Component { constructor(props) { super(props) } render() { retur原创 2021-07-04 19:20:32 · 152 阅读 · 0 评论 -
【React.js】Portals
Portals组件默认会按照既定层级嵌套渲染如何让组件渲染到父组件外？使用场景overflow: hidden父组件 z-index值太小fixed需要放在body第一层级代码案例import React from 'react'import ReactDOM from 'react-dom'import './style.css'class App extends React.Component { constructor(props) { supe原创 2021-07-01 23:17:06 · 144 阅读 · 1 评论 -
【React.js】之事件
事件bind this关于 event 参数传递自定义参数代码案例import React from 'react'class EventDemo extends React.Component { constructor(props) { super(props) this.state = { name: 'zhangsan', list: [ {原创 2021-06-30 08:51:38 · 163 阅读 · 0 评论 -
【React.js】之生命周期
React生命周期生命周期函数v16.4以前V16.4以后从16.4开始下面的三个生命周期已经改名，仍然可以使用旧版本周期函数，但控制台会报警告。componentWillMount → UNSAFE_componentWillMountcomponentWillReceiveProps → UNSAFE_componentWillReceivePropscomponentWillUpdate → UNSAFE_componentWillUpdate注意： 如果使用React.Stri原创 2021-06-29 08:40:20 · 189 阅读 · 1 评论 -
【React.js】之setState
setState不可变值可能是异步更新可能会被合并不可变值从React渲染组件性能考虑，使用旧数据创建新数据时，要保证旧数据同时可用，并且没有变化的部分还可用，目的是尽量减少不必要的渲染和重绘。如果是简单的赋值给一个新的变量，新旧对象只是名称不同，不进行深比较js认为数据不变。其次，也会带来引入对象浅拷贝的问题，造成不可预测的展示值。这对react响应重新渲染造成了性能影响，或不能及时更新dom。shouldComponentUpdate 是因为 state值和setState值一样是原创 2021-06-29 08:22:31 · 221 阅读 · 0 评论 -
【React hooks】性能优化useMemo的使用
useMemo1.概念const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);返回一个 memoized 值。把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。记住，传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作，诸如副作用这类的操作属于 useEf原创 2021-06-28 08:22:43 · 939 阅读 · 1 评论 -
【React.js】之state的使用
React中有两种组件写法，一种是class组件，一种是函数组件。1.类组件写法import React from "react";class ClickCounter extends React.Component { constructor() { super() // 定义 state this.state = { count: 0 } // 绑定this this原创 2021-06-25 09:04:37 · 321 阅读 · 0 评论 -
【React】Antd - step组件的使用
Antd 完成 step 组件代码案例：index.tsx <div className="steps"> <Steps current={curRecNodeInd} size="small"> {reconcileNodeList.map((item: any, idx: number) => ( <Step key={`${item.index}-${i原创 2021-06-24 12:00:13 · 2772 阅读 · 0 评论 -
【React.js】子组件向父组件传值
在父组件中定义一个函数，该函数用于处理传递过来得值（比如用于修改父组件中state得数据）在子组件调用部分通过属性绑定得形式绑定该函数（在子组件中就可以通过this.props.属性名就可以拿到该函数）在子组件中绑定触发传值得事件比如点击事件，在事件处理函数中通过this.props.属性名（）调用父组件中定义得方法就可以在父组件中拿到传递过来得值进行使用<!DOCTYPE html><html lang="en"><head> &l..转载 2021-06-24 09:17:41 · 125 阅读 · 0 评论 -
【React Hook】之useImerpativeHandler
作用：将函数内的方法返回给ref绑定的组件类组件写法：利用ref, 在父组件中调用子组件事件Hello.jsimport React, {Component} from 'react'export default class Hello extends Component { handler = () => { alert('Hello world') } render() { return ( <原创 2021-06-23 09:19:02 · 439 阅读 · 1 评论 -
【React.js】之组件传值
1.父子组件之间通讯props 传递数据props 传递函数props 类型检查2.状态提升把 数据 存储在父组件，向子组件层层传递3.React实现to do listimport React from 'react'import PropTypes from 'prop-types'class Input extends React.Component { constructor(props) { super(props) t.原创 2021-06-23 08:10:11 · 221 阅读 · 0 评论 -
【React.js】如何使用ant design树形组件
树形组件涉及到层层递归的模式，因此需要用到深度优先遍历dfs, 树的数据结构在前端开发中十分重要。代码案例：const { Tree } = antdconst { TreeNode } = treeconst json = [ { title: "一", key: "1", children:[{title:"三", key: "3", children:[]}] }, { title: "二", key: "2", child原创 2021-06-22 09:22:09 · 580 阅读 · 0 评论 -
【React.js】之表单的使用
React.js中如何使用表单？import React from 'react'class FormDemo extends React.Component { constructor(props) { super(props) this.state = { name: '夹心', info: '个人信息', city: 'nanjing', flag: tru原创 2021-06-22 00:14:28 · 205 阅读 · 0 评论 -
【Reactjs】多层展示报表信息
需求：从后端返回的数据为层层嵌套的树状结构，前端如何层层遍历并展示?json 文件items: [ { fieldName: 'allFlowMoney', fieldChineseName: '本期账单消费', totalFee: 0, existRebateReport: false, subItems: [ { fieldName: 'fltConMoneyHasPost',原创 2021-06-12 15:37:17 · 367 阅读 · 0 评论 -
【React.js】实现下拉列表多级联动、与优先级添加、删除功能
需求：下拉列表第一级选中的，二级不能再选中，三级不能选中一二级选中的，以此类推原创 2021-06-18 09:13:31 · 2160 阅读 · 0 评论 -
【Reeatjs】JSX的基本使用、条件渲染与列表渲染
JSX的基本使用import React from 'react'class JSXBaseDemo extends React.Component { constructor(props: any) { super(props) this.state = { name: '双越', imgUrl: 'https://img1.mukewang.com/5a9fc8070001a82402060220-140-原创 2021-06-20 22:11:14 · 174 阅读 · 0 评论 -
【React.js】之Context
在大型项目中公共信息(语言、主题) 如何传递给每个组件?用props过于繁琐用redux小题大做import React from 'react'// 创建 Context 填入默认值（任何一个 js 变量）const ThemeContext = React.createContext('light')// 底层组件 - 函数是组件function ThemeLink (props: any) { // const theme = this.context // 会报错。原创 2021-06-19 22:51:29 · 157 阅读 · 1 评论 -
React获取DOM节点之useRef
React Hook可以利用useRef获取DOM节点代码animport React, { useEffect, useRef } from 'react'function UseRef() { const btnRef = useRef(null) // 初始值 useEffect(() => { console.log(btnRef.current) // DOM 节点 }) return <div>原创 2021-06-19 21:01:59 · 1906 阅读 · 0 评论 -
React 数据改变后页面没有重新渲染
小小的一个前端关注0.1012021.01.21 11:29:47字数 151阅读 2,864页面通过render渲染，通过setState改变数据但是页面并未改变。（记录）const obj = this.state.obj;obj.forEach((e) =>{ 改变了对象的值});this.setState({ obj});此时页面并未改变解决方法：浅拷贝方式获取对象并修改再赋值。const obj = [...thi...原创 2021-06-19 13:44:02 · 9151 阅读 · 1 评论 -
【React.js】实现to do list
1.创建react项目安装脚手架：create-react-appnpx create-react-app my-appnpm i -g create-react-appcreate-react-app my-app工程目录说明：-node_modules 依赖包-public 项目入口-src 项目资源 index.js 程序入口 App.js 组件2.React函数组件实现to do list添加、显示与删除功能App.jsimport Combination fr原创 2021-02-22 20:25:49 · 205 阅读 · 0 评论