特性 | plain variable |
state |
ref |
---|---|---|---|
渲染后引用是否相同 | ❎ | ❎ | ✔ |
是否可以update | ❎ | ✔ | ✔ |
- useContext的变化会引起中间组件的重新渲染
- store的变化只会引起相关组件的重新渲染
- 持久化的引用,只有
current
可用 - 可以用来获取或者添加
dom node
useMemo
用来缓存昂贵计算
的值, 也可以缓存组件
useCallback
用来持久化函数的引用
memo
用来缓存组件
, 可以避免由父组件渲染
引起的不必要的子组件渲染
- 创建context
- defaultContext是在没有provider的情况下,传给consumer或者useContext的默认值,但是是不可变的,无法通过setContext来变更。
// userContext.js
import { createContext } from 'react';
const UserContext = createContext([
{
firstName: 'Bob',
lastName: 'Bobberson',
suffix: 1,
email: 'bobberson@example.com'
},
obj => obj
])
const { Provider } = UserContext;
export { Provider, UserContext }
- 创建Provider
const UseContext = () => {
// 这个才是人类理解的默认值,可通过setContext来变更
const user = useState({
firstName: 'James',
lastName: 'Tan',
suffix: 1,
email: 'james@example.com'
})
return (
<div>
<Provider value={user}>
<h1>1st level</h1>
<Level2></Level2>
</Provider>
</div>
//
)
}
- 创建Consumer
const Level5 = () => {
// 接收context
const [user, setUser] = useContext<any>(UserContext);
return (
<div>
<h5>{`${user.firstName} ${user.lastName} the ${user.suffix} born`}</h5>
<button onClick={() => { setUser({ ...user, suffix: user.suffix + 1 }) }}>Increment</button>
</div>
)
}
- 能够跟
useRef
一起获得子组件的DOM
- 在
父组件
创建ref
,传递到子组件
, 在父组件
获取DOM
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;
- 结合
useRef
和forwardRef
, 允许子组件
将操作自身DOM的函数
传递给父组件
(向上传递)
htmlFor
forfor
Context
+useReducer
=Redux
; 其实还是redux的方案更好,context其实只是props多层传递的一种简化而已。styled-component
:emotion.sh
将css复用粒度提升tag层面到了component层面,但是加快了开发速度,可以适用于小型项目。styled-component
高亮插件:vscode-styled-component
sass
:yarn add node-sass
setState
: hooks是function之外的又一层,写在代码里的顺序,不一定是它真实的执行顺序