react学习
文章平均质量分 81
马花花呀蒋蒋
这个作者很懒,什么都没留下…
展开
-
深入理解setState
setState() 并不总是立即更新组件。它会批量推迟更新。这使得在调用 setState() 后立即读取 this.state 成为了隐患。setState中可以传入一个函数,这个函数接受两个参数state 和 props 都保证为最新。setState() 的第二个参数为可选的回调函数,它将在 setState 完成合并并重新渲染组件后执行。setState到底是怎样的?是同步的还是异步的?还有它的批量更新翻阅了好几篇博客,加上自己的验证觉得最合理的如下:react中的setState通原创 2021-09-09 08:30:14 · 224 阅读 · 0 评论 -
再看react官方文档,值得注意的是
受控组件在 HTML 中,表单元素(如<input>、 <textarea> 和 <select>)之类的表单元素通常自己维护 state,并根据用户输入进行更新。而在 React 中,可变状态(mutable state)通常保存在组件的 state 属性中,并且只能通过使用 setState()来更新。我们可以把两者结合起来,使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种原创 2021-09-09 08:29:31 · 121 阅读 · 0 评论 -
React Hook 学习总结
React Hook 学习总结参考:REACT官方文档(印记中文)文章目录React Hook 学习总结useStateuseEffectuseLayoutEffectuseContextuseReduceruseCallbackuseMemouseRefuseState允许我们在React函数组件中添加state的Hookconst [count,setCount] = useState(0)useState传入一个初始值,返回一个数组,可通过数组解构第一个是变量,第二个是修改变量的方法原创 2021-04-13 15:44:13 · 171 阅读 · 1 评论 -
浅谈React(3)React的key
浅谈React文章目录浅谈React前言一、React的diff总结前言这篇内容少一些一、React的diff传统diff算法时间复杂度达到了O(n3),React结合所需特点,优化到O(n)策略我们对DOM的跨层级操作很少相同类的两个组件将拥有相似的树形结构同一层一组的组件可以通过key进行区分基于上述策略,react diff的优化分为tree diff、component diff、element diff基于策略一,tree diff只对同一层级的节点进行di原创 2020-12-26 13:55:30 · 113 阅读 · 0 评论 -
浅谈react(2) 新旧生命周期 (浅谈两个钩子getDerivedStateFromProps、getSnapshotBeforeUpdate)
浅谈React系列目录浅谈react(1)三大属性文章目录浅谈React系列目录前言一、聊聊旧的生命周期钩子1、人有从生到死的一个过程,组件也有从生到死这样一个过程。2、React提供的7个生命周期钩子3、React组件生命周期流程图二、新的生命周期钩子1.改变2.新的生命周期流程图3、对两个新钩子参数的验证总结前言本篇谈谈React新旧生命周期,React官方去掉了三个旧生命周期钩子,同时引入了两个新的生命周期钩子。因为中文文档中关于两个新钩子的描述比较少,所以我就看了写博客同时加上验原创 2020-12-25 14:32:01 · 1007 阅读 · 1 评论 -
浅谈react(1)三大属性
浅谈react本章目录浅谈react前言一、React是什么二、jsx三、react组件的创建方式四、react三大属性之state1、react把组件看作是一个状态机2、 react建议把state当作不可变的3、用this.setState({})来更新状态时可能时异步的4、使用this.setState更新状态是合并的,而不是替换五、react三大属性之props六、react三大属性之refs总结前言本篇主要来谈React的三大属性state、refs、props一、Reac原创 2020-12-23 21:26:59 · 440 阅读 · 3 评论