xinghuowuzhao的博客

react的项目，在安装成功后，页面报错。找教程没有找到合适的。其他，需要在App.css 添加引入。

（一）需求最近在学习React，学到了React Hook的用法，但比较零散，今儿做下总结。（二）小结1、useState是用来做组件内的状态管理的；父子组件之间传值，使用props;可传数值；也可以传对象；https://blog.youkuaiyun.com/xinghuowuzhao/article/details/1241766902、useEffect为了避免整体重新渲染消耗性能，想只渲染其中一部分时使用useEffect。https://blog.youkuaiyun.com/xinghu

（一）需求最近在学习React，学到了React Hook 做了 useMemo Demo。（二）介绍使用useMemo是为了进而保留变量初始的值，并且依赖其他变量的改变后才更新的操作。/* * @Author: ArdenZhao * @Date: 2022-04-20 11:18:24 * @LastEditTime: 2022-04-20 11:36:50 * @FilePath: /react-ts/src/components/react/12-Hook-useMemo.js *

（一）需求最近在学习React，学到了React Hook 做了 useRef Demo。（二）介绍使用useRef是为了修改某个DOM节点相关的操作。下面的Demo是使用useRef实现，input输入框获取焦点的例子。/* * @Author: ArdenZhao * @Date: 2022-04-19 10:47:35 * @LastEditTime: 2022-04-19 10:54:38 * @FilePath: /react-ts/src/components/react/11

（一）需求最近在学习React，学到了React Hook 做了 useReducer Demo。（二）介绍使用useReducer是为了方便状态管理，用法和Redux特别像。/* * @Author: ArdenZhao * @Date: 2022-04-18 17:26:35 * @LastEditTime: 2022-04-18 18:09:53 * @FilePath: /react-ts/src/components/react/10-Hook-useReducer.js * @

（一）需求项目配置项做成可视化低代码的形式，于是做了技术调研。（二）技术调研1、reaflowreact技术栈https://github.com/reaviz/reaflow文档https://reaflow.dev/?path=/story/docs-introduction–pagedemohttps://reaflow.dev/?path=/story/docs-introduction–page2、bpmnVue 技术栈——个人开发https://bpmn.ops-coff

（一）需求最近在学习React，学到了React Hook 做了 useContext Demo。（二）介绍使用useContext是为了方便爷孙组件间传值。//爷爷组件 /* * @Author: ArdenZhao * @Date: 2022-04-16 09:48:50 * @LastEditTime: 2022-04-16 15:14:57 * @FilePath: /react-ts/src/components/react/9-ContextProvider.js * @De

（一）需求最近在学习React，学到了React Hook 做了 useEffect Demo。（二）介绍为了避免整体重新渲染消耗性能，想只渲染其中一部分时使用useEffect。useEffect 是专门来处理副作用域的 componentDidMount 有相同的用途，合并成API.const [reset, setReset] = useState(100) useEffect(() => { // 在返回一个清除数据函数作用前，清除数据 console.log

（一）需求最近在学习React，学到了React Hook 做了useState Demo。（二）介绍1、默认值是数字类型const [num, setNum] = useState(0);const clickX = () => { setNum(num + 1);}<p> 1、初始化为数字:{num}</p><Button onClick={clickX}> Click Number</Button>2、默认值是对象

（一）需求最近在学习React，学到了React事件传参的方式，就记录一下。（二）介绍1、bind的形式传参bind形式 参数在前clickBtn = (params, event) => { console.log('[ event ] >', params, event) this.setState({ sum: params + 1 }) }<Button onClick={this.clickBtn.bind(this, this.state.

学习目标是什么特点基本使用说明手写使用实战（一）为什么需要组件通讯我们知道，React为了实现一次代码编写多次使用的目的，我们在使用React开发的过程中，会将重复多次使用逻辑和功能代码拆成了一个个组件，在根组件下，多个组件共同组成了我们看到的一整个页面。（二）什么是组件通讯1、组件通讯的定义根据刚才的讲解，我们知道了组件和组件的传值就是组件通讯。2、那么React组件通讯有什么特点呢？React遵循从上到下的数据流向，即单向数据流。比如，数据是从父节点传递到子节点。如果顶层（父

1、需求测试环境、预发布环境都没有问题，发布到线上突然遇到问题，图像显示不全，或有的就出来了。崩溃了很久。最终发现是图像太大了，无法展示。2、报错RangeError: Invalid typed array length: 48771072WebglFilterBackend.copyGLTo2DPutImageData [as copyGLTo2D][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wac9Ovw3-1640662646307)(/img/bVc

1、需求实现Canvas绘制多边形。2、效果3、代码官方Demo是HTML版本的，我改写了React版本。// Copyright 2021 zhaoardenimport React, { useState,useCallback } from 'react';import { fabric } from "fabric";import { Button } from 'antd';class Polygon extends React.Component { construc

1、需求想实现页面弹窗的拖拽功能，原生手写时，基本逻辑能实现，但是拖拽双击操作时，会有bug，待解决，就想着看看有没有合适的组件，发现还真有~2、介绍周下载量300w+2.1支持有各种拖拽情况的Demo实现2.2支持React16.3+2.3 基本代码<Draggable> <div>I can now be moved around!</div></Draggable>3、Demo样例// Copyright 2021 zh

（一）需求在标注图片时，需要控制对于同一图片的对比度，所以需要实现对于图片对比度的控制。接下来是需求澄清1、正常图片2、对比度对比度设置为0.25时3、对比度设置为-0.5时（二）说明定义说明图像对比度指的是一幅图像中明暗区域最亮的白和最暗的黑之间不同亮度层级的测量，即指一幅图像灰度反差的大小。差异范围越大代表对比越大，差异范围越小代表对比越小，好的对比率120:1就可容易地显示生动、丰富的色彩，当对比率高达300:1时，便可支持各阶的颜色。差异范围越大代表对比越大，差异范围越小代

1、需求在React+Ant Design的项目中，需要选择颜色。Ant Design 没有合适的组件。2、React-color找到了这个插件，周下载量103w官方给了Demoimport React from 'react'import reactCSS from 'reactcss'import { SketchPicker } from 'react-color'class SketchExample extends React.Component { state = {

前言受学长启发，最近一直在思考前端的侵略性：从侵略各端——用户展示的界面（PC，移动），到开拓AR VR，再到后端Node，再到区块链…心得是：想学号，遇到技术，干就完了~ 不能怂。最近从搞Facebook,Twitter，QWA，React，Hook，VPN，GitHub SSH配置，CLI，node版本…每天都会遇到各种问题，每天都在迎接挑战，直面，干就完了。不断解决问题，还是挺爽的~1、需求在左侧点击不同的框时，清除掉右侧输入框中的值。2、思路状态提升，将值以及值的更改提升到根

使用JSX定义直观的用户界面JSX是将HTML直接嵌入到JavaScript中的一种XML语法，抛开了传统的将业务和逻辑相分离的“最佳实践”。它的语法很像HTML，但并不是HTML。之后JSX通过翻译器转换到纯JavaScript再由浏览器执行。可以将JSX理解为一个比较高级但很直观的语法糖。它使用了js自带的语法和特性，而不需要使用模板引擎，使开发人员只需要利用代码去构建整个界面...

现在最热门的前端框架，毫无疑问是 React 。上周，基于 React 的 React Native 发布，结果一天之内，就获得了 5000 颗星，受瞩目程度可见一斑。React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了...

React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。有两个方面，它没涉及。代码结构组件之间的通信对于大型的复杂应用来说，这两方面恰恰是最关键的。因此，只用 React 没法写大型应用。为了解决这个问题，2014年 Facebook 提出了 Flux 架构的概念，引发了很多的实现。2015年，Redux 出现，将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端...