![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react从入门到进阶
文章平均质量分 78
一只自由的程序媛
凡心所向,素履所往
展开
-
每天一道面试题(16) - useReducer&useContext实现状态管理
如果在上一篇文章里那个问题: 说一下常用的hooks 里能够回答出 useReducer&useContext实现状态管理 , 应该会加分吧. (猜测的, 没经过试验哈哈)useReducer还是上一篇中的例子function TestReducer() { const reducer = (state, action) => { switch (action) { case 'add': return st原创 2021-10-28 20:39:15 · 332 阅读 · 0 评论 -
每天一道面试题(15) - 常用的hooks有哪些, 具体说一下
说一下常用的hooks?这道题是一道开放题, 只能说出来名字只是最初级的答案.能具体说出每个hook的使用场景并结合有关联的hook进行对比回答才算是一个合格的答案文章目录useStateuseState的异步问题useState为什么返回是一个数组而不是对象useEffectuseEffect用法useEffect && useLayoutEffect的区别useReducer用useReducer实现一个useStateuseReducer+useContext实现状态管理us原创 2021-10-27 19:21:05 · 1418 阅读 · 0 评论 -
每天一道面试题(9) - react hooks的优点
在社招中, 如果项目经验中有react hooks, 面试官就经常会问到这个问题.今天就来系统的总结一下回答这个问题的要点, react hooks的主要优点有以下几点更容易复用代码(最重要)副作用统一处理, 不需要维护各个生命周期代码可读性更强, 代码风格更简洁清爽更容易复用代码如果类组件要复用代码, 经常需要高阶组件.但是高阶组件HOC有两个问题HOC需要在原组件上进行包裹或者嵌套,如果大量使用 HOC,将会产生非常多的嵌套,这让调试变得非常困难。HOC可以劫持 props,在不原创 2021-09-22 19:19:35 · 1360 阅读 · 0 评论 -
react hooks的闭包陷阱(setInterval不生效)问题
在使用react hooks时, 会遇到这样的问题const [count, setCount] = useState(1)useEffect(() => { setInterval(() => { console.log(count) }, 1000) //闭包陷阱}, [])const handleClick = () => { setCount(count+1)}return ( <div o原创 2021-07-05 20:26:05 · 3205 阅读 · 0 评论 -
从react原理角度理解setState究竟是同步还是异步以及react hooks中的更新机制
不管是面试, 还是在日常开发中, 我们经常会遇到这样一个问题:setState究竟是同步还是异步, 什么时候同步, 什么时候异步?简单记忆法在理解底层原理之前, 通常很多同学是这样记忆的.在原生事件window.addEventListener中, setstate是同步更新的在回调函数(promise ajax)中是同步更新的在setTimeout 中是同步更新的async函数(无论await的是同步还是异步, 都会先等待里面执行完毕再执行await后面的代码) 是同步更新的注意:原创 2021-07-05 20:04:14 · 3025 阅读 · 2 评论 -
react中的高阶组件HOC和Hooks
参考文章MixinMixin(混入)是一种通过扩展收集功能的方式,它本质上是将一个对象的属性拷贝到另一个对象上面去,不过你可以拷贝 任意多个对象的 任意个方法到一个新对象上去,这是 继承所不能实现的。它的出现主要就是为了解决代码复用问题。Mixin的危害Mixin 可能会相互依赖,相互耦合,不利于代码维护不同的 Mixin中的方法可能会相互冲突Mixin非常多时,组件是可以感知到的,甚至还要为其做相关处理,这样会给代码造成滚雪球式的复杂性高阶组件高阶组件可以看作React对装饰模式的一种原创 2021-07-02 10:36:50 · 1423 阅读 · 0 评论 -
react的高级特性
高级特性代码分割import使用import进行代码分割, 异步加载//使用之前import { add } from './math';console.log(add(16, 26));//使用之后import("./math").then(math => { console.log(math.add(16, 26));});react.lazy//使用之前import OtherComponent from './OtherComponent';//使用之后c原创 2021-07-02 10:35:43 · 121 阅读 · 0 评论 -
react中事件处理时为什么要手动绑定this?
react中事件处理时为什么要手动绑定this?之前一直没有深入研究过这个问题, 重读后仔细研究了一下这个问题.我们都知道普通js函数中this的指向是调用函数的对象,而且是离谁近指向谁.非严格模式下, this默认指向全局对象window严格模式下, this为undefined而箭头函数是在定义时就已经确定好了this的指向, 不会根据谁调用它而改变基于此, 在react中为什么直接 onClick={this.handleClick} 不可以呢?根本原因是react中的dom是虚拟dom原创 2020-09-28 16:17:51 · 1131 阅读 · 0 评论 -
react进阶--重读文档教程一
JSXJSX可以防止XSS注入攻击在渲染之前, React DOM会格式化JSX中的所有值, 从而保证用户无法注入任何应用之外的代码. 再被渲染之前, 所有的数据都被转义成为了字符串处理.元素渲染更新已渲染元素React元素是不可突变的, 一旦创建了一个元素, 就不能再修改其子元素或任何属性. 更新UI的唯一方法就是创建一个新元素, 并将其传入ReactDOM.render()方法中. 但是大多数时候都只会调用一次render方法组件和属性组件组件分为函数式组件和class类组件函数式:原创 2020-09-18 18:49:41 · 150 阅读 · 0 评论 -
react(三)组件生命周期
组件从被创建到被销毁的过程称为组件的生命周期。通常可以分为三个阶段:挂载阶段、更新阶段、卸载阶段每个阶段的生命周期方法如下挂载阶段:1、constructor在这个方法中需要接收父组件传递过来的props属性对象,必须在这个方法中调用super(props)才能保证props被传入组件中。该方法通常用于初始化组件的state以及绑定事件处理方法2、componentWill...原创 2019-09-27 18:24:54 · 196 阅读 · 0 评论 -
react(二) 受控组件 react controlled components
受控组件的意思就是每当表单的状态发生变化时,都会被写入组件的state中,这种组件被称为受控组件普通的组件无法改变输入框的值,那么将input组件和state结合起来再绑定onChange事件,最后再使用state实时更新value值,显示在input中,这样就形成了一个受控组件在我们的例子中,input的一个类型为radio的单选按钮,根据选中项来设定指定不同的速度,同时根据不同的速度实...原创 2019-09-27 18:23:13 · 344 阅读 · 0 评论 -
react(一) props,state,父子组件传值
props:是一个简单结构的对象,用于把父组件中的数据或方法传递给子组件,供子组件使用。子组件中:class PostItem extends Component { render(){ const {title,author,date} = this.props; return( <ul> ...原创 2019-09-27 18:13:29 · 1085 阅读 · 0 评论