ReactNative 开发时,如何设计一个数据“灵活”的组件呢?

查看 161|回复 17
wuyiccc   
用 useMemo 控制一下防止组件重复渲染?
wkmike   
@mouyase #5 ABCDEF 都用 React.memo 包一下,各自定制 Props 变更判断
mouyase
OP
  
@wkmike 那是不是所有的组件的 props 都要独立成不同的 state 呢,如果所有的 state 都在同一个 Object 里,是不是就无效了?
wkmike   
@mouyase #12 如果都是外部组件并且接收同样的 Props 比如你说的 state 对象,A 组件根据 state.a 来更新,那你在 React.memo 第二个参数里面只判断 prevProps.state.a 和 nextProps.state.a 是否变化就行了
mouyase
OP
  
@wkmike 是不是只有类组件才能这样处理,如果是函数组件呢
wkmike   
@mouyase #14 React.memo 就是给 Function Component 实现了类似 Class Component 生命周期 shouldComponentUpdate 方法用来优化性能的高阶组件
rabbbit   
试着研究了一下,这样倒是不会更新,不过感觉好麻烦
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
})
}}/>
);
}
wkmike   
@rabbbit #16 那就组件内用 useMemo 咯,只引用各自用到的 a 和 b ,另外 setInputValue 直接用 prevState
https://gist.github.com/wkmike/e3787e498dd7288e990a96d2cfe5ec3b
您需要登录后才可以回帖 登录 | 立即注册

返回顶部