React
Kedar
这个作者很懒,什么都没留下…
展开
-
React.useMemo、React.useCallback 配合实现性能优化
React.useMemo、React.useCallback 配合实现性能优化 我想,用 React 写项目的程序员都明白实现 React 性能优化的一大方式就是减少不必要的组件更新,在 Class 组件里面减少不必要的组件更新方式之一就是利用 shouldComponentUpdate 钩子函数。而在 React hooks 里面并没有此类函数,要想实现类似的功能,就需要 useMemo 和 useCallback 配合来实现。...原创 2020-11-03 22:07:20 · 1373 阅读 · 0 评论 -
Redux 基础
Redux 是 JavaScript 的状态容器,本篇文章主要介绍其 Action、Reducer、Store 等基础概念。一. ActionAction 描述将要采取什么动作,同时也可以把数据传送到 store 中。以下用 toDoList 添加事项来举例:// Action 里面的代码 function addToDo(detail) { const date = format...原创 2020-01-07 16:41:54 · 131 阅读 · 0 评论 -
React Hook API
useStateconst [state,setState] = useState(initState);返回 state 以及更新 state 的函数。setState 传入一个值用于更新 state,且 setState 不会在后面的渲染中变化,也就是说 setState 的地址是不会变的。如果需要旧的 state 计算出新的 state,可以将函数传递给 setState,这个函数...原创 2019-12-31 17:06:07 · 216 阅读 · 0 评论 -
React Hook规则
Hook 本质是 JavaScript 函数,但在使用的时候它有着它需要遵循的规则:只在最顶层使用 Hook,这能够让 React 在多次的 useState 和 useEffect 调用中保持 hook 的状态正确。只在 React 函数中调用 Hook,也就是说在 React 的函数组件中调用 Hook,还有一点是在自定义 Hook 中调用其他 Hook。...原创 2019-12-30 16:18:44 · 1110 阅读 · 0 评论 -
React Hook
Hook 是 React 16.8 增加的新特性,它可以使你在不使用 class 的时候使用 state 和 react 的其他特性。State Hook例:用 State Hook 实现一个计数器。import React,{useState} from 'react';function Counter(){ const [count,setCount] = useState(0);...原创 2019-12-27 17:00:48 · 249 阅读 · 0 评论 -
React Refs转发
React数据流中,父组件可以传递 props 给子组件,如果要修改子组件里面的这些 props ,只能通过修改父组件的状态,从而更新子组件里面的 props,就能够更新子组件。如果遇到了需要操作一个真实的DOM元素的时候(如输入框聚焦、选中、触发动画),则可以使用Refs。一. DOM 添加 refsclass RefButton extends React.Component{ rend...原创 2019-12-26 09:38:20 · 439 阅读 · 0 评论