![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
栗子好好吃
向来心是看客心,奈何人是剧中人
展开
-
webpack --- > 在项目中使用React
说明:分为2步:首先导入react 和 react-dom:保证了虚拟DOM的创建和使用使用babel转码器: 由于DOM结构太多,每次使用React.createElement创建虚拟DOM会给开发带来很大压力,因此采用html的写法,通过babel转码器转换成React语法,可以很大程度上提高开发效率项目源代码在项目中使用react运行cnpm i react reac...原创 2019-12-30 17:00:25 · 214 阅读 · 1 评论 -
javascript --- > [虚拟DOM] 初始化&& 实现
说明本篇主要说明为什么要使用虚拟DOM技术,以及如何实现简单的虚拟dom为什么提出 -> DOM操作慢我们使用createElement属性来创建一个最常见的div,看看一个最常见的DOM有多少个属性<script> const div = document.createElement('div'); let str = ''; for(let key i...原创 2019-12-21 21:39:45 · 368 阅读 · 0 评论 -
react --- > 隔代传递参数的三种方式
组件跨层级通信 - Context上下文提供一种不需要每层设置props就能跨多级组件传递数据的方式方式1Provider提供值Consumer来消费传递的值import React from 'react';// 创建一个上下文const Mycontext = React.createContext();const { Provider, Consumer } = M...原创 2019-11-03 09:17:40 · 857 阅读 · 0 评论 -
react --- > Hook的使用
Hook是React16.8一个新增项,它可以让你在不编写class的情况下使用state以及其他的React特性特点:无需修改组件结构的情况下复用状态逻辑将组件相互关联的部分拆分成更小的函数,复杂组件将变得更容易理解更简洁、更易理解的代码使用Hook的栗子import React, { useState } from 'react'export default fun...原创 2019-11-02 18:01:46 · 115 阅读 · 0 评论 -
react --- > 复合组件,传递属性
组件复合复合组件给予你足够的灵活去定义组件的外观和行为,而且是以一种明确和安全的方式进行.如果组件间有公用的非UI逻辑,将它们抽取为JS模块导入使用而不是继承它/src/components/Composition.js// Dialog作为容器不关心内容和逻辑function Dialog(props){ return <div style={{ border: "4px...原创 2019-11-01 19:38:08 · 171 阅读 · 0 评论 -
react --- > render持续调用解决方案
问题描述:在某个组件中.有可能频繁的取数据(但是数据未改变,因此不需要更新).数据的频繁请求会触发render函数,造成性能消耗模拟代码如下export class CommentList extends Component { constructor(props) { super(props); this.state = { comments: [] } } ...原创 2019-11-01 17:24:14 · 1059 阅读 · 0 评论 -
react --- > 按需加载组件
问题描述使用 antd库时使用按钮,须导入如下import Button from 'antd/lib/button'import 'antd/dist/antd.css'这样会导入全局的样式.解决方案,配置按需加载1.安装 react-app-rewired取代 react-scripts, 可以扩展webapack 的配置, 类似vue.config.jsnpm i...原创 2019-11-01 10:49:00 · 464 阅读 · 0 评论 -
react --- > 生命周期 && 给子组件传递数据
子组件/src/components/LifeCycle.jsimport React, { Component } from 'react'export class LifeCycle extends Component { constructor(props) { super(props); // 常用于初始化状态(状态初始化、属性初始化) consol...原创 2019-11-01 09:40:33 · 106 阅读 · 0 评论