ICode9

精准搜索请尝试: 精确搜索
  • Props 默认值2022-06-27 23:34:08

    Props 默认值 场景:如果传入就以传入的参数为主,如果不传那就使用默认值 函数组件 通过函数默认参数实现 function Test ({ list, mum = 666 }) { return ( <div> {list.map(item => <p key={item}>{item}</p>)} <span>{num}</span> // 如果传了那就以实参

  • 【react】什么是fiber?fiber解决了什么问题?从源码角度深入了解fiber运行机制与diff执行2022-06-26 22:33:51

    壹 ❀ 引 我在[react] 什么是虚拟dom?虚拟dom比操作原生dom要快吗?虚拟dom是如何转变成真实dom并渲染到页面的?一文中,介绍了虚拟dom的概念,以及react中虚拟dom的使用场景。那么按照之前的约定,本文来聊聊react中另一个非常重要的概念,也就是fiber。那么通过阅读本文,你将了解到如下几个

  • 大数据请把文章推给想了解DLL的人2022-06-26 22:02:57

    DLL(Dynamic Link Library)动态链接库在 webpack 中用来将可共享且不常改变的代码抽取成公共的库。 没有使用 DLL react 和 react-dom 在 react 项目中是必备的两个库,把它们抽取出来单独打个包。 首先进行安装 npm install react react-dom --save 在 src 目录下新建 index.jsx 文

  • React中setState方法说明2022-06-25 10:32:57

    setState跟新数据是同步还是异步? setState跟新数据是异步的。 如何用代码表现出来是异步的。 点击按钮更新数据,然后去打印这个值看一下 setState跟新数据是异步的 class Father extends React.Component{ state = { num:0 } addHandler = () => { this.setState({

  • React技巧之检查元素是否可见2022-06-25 00:04:01

    原文链接:https://bobbyhadz.com/blog/react-check-if-element-in-viewport 作者:Borislav Hadzhiev 正文从这开始~ 总览 在React中,检查元素是否在视口范围内: 在元素上设置ref属性。 使用IntersectionObserver API来跟踪元素是否与视口相交。 import {useEffect, useRef, useState

  • 快速入门React(基础)2022-06-24 20:00:55

    React基础 React介绍 目标任务: 了解什么是React以及它的特点 React是什么 ​ 一个专注于构建用户界面的 JavaScript 库,和vue和angular并称前端三大框架,不夸张的说,react引领了很多新思想,世界范围内是最流行的js前端框架,最近发布了18版本,加入了很多新特性 ​ React英文文档(htt

  • React事件处理方法中this指向为undefined的四种解决方案2022-06-21 21:36:20

    React事件处理方法中this指向为undefined的四种解决方案: 1. 定义事件后使用bind绑定this return ( <div> <button onClick={this.clickHander.bind(this)}>Click</button> </div> ) 2. 在构造函数内部声明this指向 constructor() { super()

  • react表格合并单元格,并附上换色2022-06-21 10:34:20

       合并代码:    换色代码:    主要是根据每行的列字段来进行合并的,所以突破口就在在这里换颜色

  • react使用localStorage2022-06-21 00:34:57

    import localStorage from "localStorage";//引入 localStorage.setItem("userInfo", JSON.stringify(res.data.data));//存 localStorage.setItem("user", res.data.data.username); localStorage.setItem("userid", res.data.data.i

  • React Hooks 手写防抖useDebounce2022-06-21 00:32:15

    定义 import { useCallback, useEffect, useRef } from "react" export interface DebounceRefType { fn: Function, timer?: NodeJS.Timeout } export type DebouncePropsType = [Function, number, Array<any>] const useDebounce = (...[fn, deb

  • React Hooks 手写节流useThrottle2022-06-21 00:31:47

    定义 import { useCallback, useEffect, useRef } from "react" export interface ThrottleRefType { fn: Function, timer?: NodeJS.Timeout } export type ThrottlePropsType = [Function, number, Array<any>] const useThrottle = (...[fn, thr

  • React hooks 实现图片懒加载useLazyLoad2022-06-21 00:31:09

    定义useLazyLoad 思路: 判断图片在视口内就加载,即: 元素距离页面顶部的距离offsetTop < 滚动条高度scrollTop + 视口高clientHeight import { useCallback, useEffect, useState } from 'react' import { ImgDOMListType, ImageListType } from '../components/LazyLoadDemo' import

  • 基于开源大数据调度系统Taier的Web前端架构选型及技术实践2022-06-20 19:04:24

    原文链接:基于开源大数据调度系统Taier的Web前端架构选型及技术实践 课件获取:关注公众号“数栈研习社”,后台私信“Taier”获得直播课件 视频回放:点击这里 Taier开源项目地址:github丨gitee 上两期,我们为大家分享了Taier入门及控制台的介绍,本期我们为大家分享Taier的Web前端架构介绍

  • React中的context 数据传递2022-06-19 19:02:44

    1.定义 js文件 import React from 'react' /**  *  * Context 相当于一个公共的存储空间,  *      我们可以将多个组件中都需要访问的数据统一存储到一个Context中,  *      这样无需通过props逐层传递,即可使组件访问到这些数据  *        *      通过React

  • react setFieldsValue2022-06-19 11:34:39

    import React from "react"; import { Form, Input } from 'antd'; class TestForm extends React.Component { componentDidMount(){ const { setFieldsValue } = this.props.form; // 这里就能实现指定表单设置value setTimeout(()=>{ se

  • (redux简单体验)创建Redux中的仓库-store和reducer2022-06-19 02:00:16

    npm install --save redux react-redux //安装react-redux和redux "^4.2.0", 只装 redux也可   TodoList.js import React, { Component } from 'react' import {Input,Button,List} from 'antd' import store from './store'; class

  • React的 自动批处理 和 半自动批处理2022-06-18 02:32:23

    ( 温馨提醒: 大佬可以跳过 ...) 话不多说, 咱们言归正传 什么是批处理? 我们先看一张图:   这边setState了 3 次,  打印出来 还是 0 ; 而不是1,2,3  没错, 这就是 react 的批处理   批处理  : 是 React 中对于 SetState 的合并,  框架内部替你做了一个合并,以此减少渲染

  • React + Typescript领域初学者的常见问题和技巧2022-06-17 20:00:40

    React + Typescript领域初学者的常见问题和技巧 创建一个联合类型的常量 Key const NAME = { HOGE: "hoge", FUGA: "fuga" } as const; keyof typeof NAME // => "HOGE" | "FUGA" 创建常量值的联合类型 typeof NAME[keyof typeof NAME] // => "hog

  • React Hook useDragList 列表拖拽2022-06-17 19:03:00

    Hook定义 useDragList import { useState } from "react"; interface useDragPropsType { list: Array<any>, dragItemClassName: string } const checkValidDragItem = (e: React.DragEvent, className: string) => (e.target as HTMLLIElement).

  • React项目/JSX中‘\n’不换行问题解决2022-06-17 14:32:46

    1 首先,对返回的数据中的\n进行处理,用<br/>替换 eg:const info = 'React\n Vue\n Angular'; const replaceInfo = info.replace(/\\n/g, '<br/>); 2 在JSX中,配合dangerousSetInnerHTML实现换行,设置css属性:white-space:pre-wrap <div style={{whiteSpace: 'pre-

  • 如何使用npx创建vue或者react项目2022-06-16 22:06:25

    如何使用npx创建vue或者react项目 不需要提前安装全局工具包(@vue/cli和create-react-app)的情况下,直接使用npx命令来创建项目 好处: 不需要全局安装包。 每次使用最新的全局工具来创建项目。 缺点: 慢一些 用npx创建vue项目 npx @vue/cli create your-project-name 用npx

  • React基础中的单一标签包裹的问题2022-06-16 20:00:44

    先上一段代码: <div id="example"> </div function HelloMessage(props1) { return (<h1>Hello {props1.name}!</h1>); } const element = <HelloMessage name="maomin"/>; ReactDOM.render( element, docume

  • vue和react的组件传值2022-06-16 19:32:45

    vue组件传值 1. 父组件给子组件传值 父组件给子组件传值的地方,添加自定义的属性,属性的值就是需要传递给子组件的值,如果属性的值为变量,boolean类型,number类型,对象,数组,null,undefined,需要使用绑定属性 <!-- 父组件中使用子组件 --> <!-- n和list是一个自定义属性 后面的num和list是

  • 关于react的props你需要知道的一个简单方法2022-06-16 19:01:58

    //注意一点:函数名必须大写 function Clock(props) { return ( <div> <h1>Hello, world!</h1> <h2>现在是 {props.date.toLocaleTimeString()}.</h2>//这里的toLocaleTimeStriing可以将date对象的时间部分转化成字符串 </div> ); } functio

  • React Suspense 尝鲜,处理前后端IO异步操作2022-06-16 14:04:25

    简单介绍一下Suspense Suspense主要用来解决网络IO问题,它早在2018年的React 16.6.0版本中就已发布。它的相关用法有些已经比较成熟,有的相对不太稳定,甚至经历了重命名、删除: 在render函数中,我们可以写入一个异步请求,请求数据 react会从我们缓存中读取这个缓存 如果有缓存了,直接进

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有