@mouyase #12 如果都是外部组件并且接收同样的 Props 比如你说的 state 对象,A 组件根据 state.a 来更新,那你在 React.memo 第二个参数里面只判断 prevProps.state.a 和 nextProps.state.a 是否变化就行了
@mouyase #14 React.memo 就是给 Function Component 实现了类似 Class Component 生命周期 shouldComponentUpdate 方法用来优化性能的高阶组件
试着研究了一下,这样倒是不会更新,不过感觉好麻烦 import React,{ useState, memo } from 'react'; function MyInput(props) { return ( [i] { props.onInput(e.target.value) }} /> ) } function MyInputB(props) { return ( [i] { props.onInput(e.target.value) }} /> ) } const InputBMemo = memo(({value, onInput}) => { return },(oldProps, newProps) => oldProps.value === newProps.value) export function App(props) { const [inputValue, setInputValue] = useState({ a: 1, b: 2 }) return ( { setInputValue({ ...inputValue, a: value }) }}/> [I] { setInputValue({ ...inputValue, b: value }) }}/> ); }
@rabbbit #16 那就组件内用 useMemo 咯,只引用各自用到的 a 和 b ,另外 setInputValue 直接用 prevState https://gist.github.com/wkmike/e3787e498dd7288e990a96d2cfe5ec3b