你好,我叫杨普晓,有 3 年 Threejs 开发经验,曾向 Three.js 贡献多个 PR,之前做过:
- 3D点云立方体标注工具
- 自动驾驶BEV联合标注工具
- 2D拉框和多边形标注工具
目前就职于郑州某公司从事 基于浏览器的 3D标本解剖教学平台研发。
我还会:React、Vue3、Nodejs、Electron、Taro、Uniapp...
若有交流需要,可通过下面方式与我联系:
-
微信:15890145250
React Hook 系列教程,学习和探索Hooks世界。
License: The Unlicense
你好,我叫杨普晓,有 3 年 Threejs 开发经验,曾向 Three.js 贡献多个 PR,之前做过:
目前就职于郑州某公司从事 基于浏览器的 3D标本解剖教学平台研发。
我还会:React、Vue3、Nodejs、Electron、Taro、Uniapp...
若有交流需要,可通过下面方式与我联系:
微信:15890145250
最近也在学习React Hook,正好搜到了本教程,便简单拜读一遍,收获颇丰。不过教程中还有几个小问题可能需要讨论或者更正:
01 React Hook 简介
子组件为了达到修改父组件中的数据状态,通常采用“高阶组件(HOC)”或“父组件暴露修改函数给子组件(render props)”这2种方式。 这2种方式都会让组件变得复杂且降低可复用性。
高阶组件和render props是为了解决代码复用的问题。
实际子组件要修改父组件的数据状态,应该是通过父组件暴露一个回调函数,子组件通过该回调函数传递数据来修改吧?
复杂场景下,比如数据获取(dade fetching)和事件订阅(event listeners),相关代码难以组织在一起。
dade fetching应为data fetching。
03 useState高级用法
通过React官方文档可以知道,当使用 setXxx 赋值时,Hook会使用Object.is()来对比当前值和新值,结果为true则不渲染,结果为flash就会重新渲染。
flash应为false。
06 useContext基础用法
请注意传值必须使用value={obj}这种形式;
Context传值时,value后面不一定必须是对象,也可以是字符串等原始类型值。
在类组件中除了<XxxContext.Consumer>标签,还有另外一种获取共享数据方式:static xxx = XxxContext; 但是这种形式在函数组件中无法使用。
在类组件中,一般是指定类组件的静态属性contentType,这样在类中可以直接用this.context消费该Context的值,而不是任意一个静态属性。
08 useReducer基础用法
EventEimtter
是否是“EventEmitter”?
楼主好文,何不搞个博客呢?
个人猜测 不知道是否是这样
<button onClick={() => {setObj({...obj,a:obj.a+1})}}>a+1</button>
<button onClick={() => {setObj({...obj,b:obj.b+1})}}>a+1</button>
// 应该为
<button onClick={() => {setObj({...obj,b:obj.b+1})}}>b+1</button>
博主文章写得挺好,先赞一个,不过我这边有个问题咨询一下,有空可以看看
文章地址:https://github.com/puxiao/react-hook-tutorial/blob/master/01%20React%20Hook%20%E7%AE%80%E4%BB%8B.md
问题描述:文章里面提到了hook的缺点“缺点二:组件数据状态逻辑不能重用、组件之间传值过程复杂”,然后后面又讲了“类组件缺点二:组件之间传值过程复杂、缺点三:复杂场景下代码难以组织在一起Hooks解决方式:通过React内置的useState()函数,可以将不同数据分别从"this.state"中独立拆分出去。降低数据复杂度和可维护性,同时解决类组件缺点三中“内部state数据只能是整体,无法被拆分更细”的问题。”
我的问题是,没有看出来hooks是怎么解决“组件之间传值过程复杂”的问题?
博主,10.useCallback那篇我有个疑问。
文章末尾那个案例,提到:只要依赖变量不发生变化,那么重新渲染时就可以一直使用之前创建的那个函数,达到阻止本次渲染。我的理解是clickHandler01 和clickHandler02着两个函数不用重新渲染,但是跟按钮没关系。
因为不是还有这个规则吗:默认情况下如果父组件重新渲染,那么该父组件下的所有子组件都会随着父级的重新渲染而重新渲染。
所以我的疑问是为啥点击一个按钮不会让另外一个按钮重新渲染
12章 useRef的基础用法
useRef 使用示例3 子组件中
import { useEffect, useState } from "react";
const ChildComponent = ({ funRef }) => {
const [num, setNum] = useState(0);
useEffect(() => {
const doSomething = () => {
setNum(Math.floor(Math.random() * 100));
};
funRef.current = { doSomething }; //在子组件中修改父组件中定义的childFunRef的值
}, [funRef]);
return <div>{num}</div>;
};
export default ChildComponent;
1.将funRef.current = { doSomething }写在useEffect中,而useEffect后面依赖了变量funRef,这样不会造循环执行吗?
2.doSomething放在useEffect而不是放在子组件中直接创建,每次组件刷新都会从新生成一份doSomething(),这个不太理解
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.