纯组件在没有变化时呈现? [英] Pure Component renders when no change is there?
问题描述
我有一个像这样的纯组件?
接口道具{checkBoxTitleStyle?: 任何checkBoxBackgroundColor?: 任何onPressCheckBox?: (id, isChecked, selectedArray , options?: CheckBoxOptions) =>空白itemKey?: 任何mainContainerStyle?: 任何}类 CheckBoxComponent 扩展了 PureComponent{构造函数()使成为()}
现在当我在我的 otherComponent 中使用这个 pureComponents
如果我不传递道具 mainContainerStyle 那么它工作正常,它仅在有一些变化时呈现.
但是如果我在 props 中传递 mainContainerStyle 那么它每次都会渲染,即使没有改变.每次渲染都会使性能变慢.有什么办法可以解决它或者为什么会这样.
确保不要传递给像 mainContainerStyle={{...other stuff...}}
这样的 prop 文字对象并保存它的状态.
示例
const { PureComponent, useState, useEffect } = React;类 CheckBoxComponent 扩展 PureComponent {构造函数(道具){超级(道具);}使成为() {console.log('渲染');返回 <div>{JSON.stringify(this.props)}</div>}}const App = () =>{const [mainContainerStyle, setStyle] = useState({position: 'absolute'});const [count, setCount] = useState(0);const checkBoxKey = 1;常量项 = {编号:1,标签:'标签',isChecked: 真,选项: {}}const [options, setOptions] = useState(options);const [itemState, setItemState] = useState(item);常量颜色 = {鸭蓝:''}const get = (item, prop) =>{退货商品[道具]}返回 <复选框组件checkBoxKey={checkBoxKey}itemKey={get(item , 'id')}itemTitle={get(item , 'label', '')}isCheckBoxSelected={get(item , 'isChecked' , '')}checkBoxBackgroundColor={colors.DuckBlue}//mainContainerStyle={{}}//导致重新渲染mainContainerStyle={mainContainerStyle}//状态//options={get(item , 'options')}//导致重新渲染//options={itemState.options}//或选项={选项}/><button onClick={() =>setCount(count => count + 1)}>改变样式</button>}ReactDOM.render(<应用程序/>,document.getElementById('root'));
<script src="https://unpkg.com/react/umd/react.development.js"></脚本><script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><div id="root"></div>
I have a pure Component like this?
interface Props {
checkBoxTitleStyle?: any
checkBoxBackgroundColor?: any
onPressCheckBox?: (id, isChecked, selectedArray , options?: CheckBoxOptions) => void
itemKey?: any
mainContainerStyle?: any
}
class CheckBoxComponent extends PureComponent<Props> {
constructor()
render()
}
Now when i use this pureComponents in my otherComponent
<CheckBoxComponent
checkBoxKey={checkBoxKey}
itemKey={get(item , 'id')}
itemTitle={get(item , 'label', '')}
isCheckBoxSelected={get(item , 'isChecked' , '')}
checkBoxBackgroundColor={colors.DuckBlue}
/>
If i don't pass the prop mainContainerStyle then it works fine, it renders only when there is some change.
But if i pass mainContainerStyle in props then it renders everytime even if no change. Each render makes the performance slower . Is there is any way to fix it or why it is occuring so.
Make sure you don't pass to prop literal object like mainContainerStyle={{...other stuff...}}
and save state of it instead.
Example
const { PureComponent, useState, useEffect } = React;
class CheckBoxComponent extends PureComponent {
constructor(props) {
super(props);
}
render() {
console.log('render');
return <div>{JSON.stringify(this.props)}</div>
}
}
const App = () => {
const [mainContainerStyle, setStyle] = useState({position: 'absolute'});
const [count, setCount] = useState(0);
const checkBoxKey = 1;
const item = {
id: 1,
label: 'label',
isChecked: true,
options: {}
}
const [options, setOptions] = useState(options);
const [itemState, setItemState] = useState(item);
const colors = {
DuckBlue: ''
}
const get = (item, prop) => {
return item[prop]
}
return <div>
<CheckBoxComponent
checkBoxKey={checkBoxKey}
itemKey={get(item , 'id')}
itemTitle={get(item , 'label', '')}
isCheckBoxSelected={get(item , 'isChecked' , '')}
checkBoxBackgroundColor={colors.DuckBlue}
//mainContainerStyle={{}} // causes re-render
mainContainerStyle={mainContainerStyle} // state
//options={get(item , 'options')} // causes re-render
//options={itemState.options} // or
options={options}
/>
<button onClick={() => setCount(count => count + 1)}>Change Style</button>
</div>
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>
这篇关于纯组件在没有变化时呈现?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!