更新道具是否应该重新渲染整个组件？

问题描述：

假设我有一个CookingClass组件，它可以像这样初始化。更新道具是否应该重新渲染整个组件？

let teachers = makeTeachers(["Amber", "Jason", "Lily"]) 
let students = makeStudents(["Hopper"]) 

<CookingClass 
    teachers={teachers} 
    students={students} 
/>

一位教师的退出：

let newTeachers = makeTeachers(["Amber", "Jason"]) 

<CookingClass 
    teachers={newTeachers} 
/>

这将使整个组件重新渲染。我不确定React是否只计算差异并有效地重新渲染，或者我必须自己使用shouldComponentUpdate来照顾它。

更真实的例子可能是实现一个Google地图，其中有一百万个标记，并且您想替换其中一个标记。

是的，你应该使用'shouldComponentUpdate'，以尽量减少重新渲染，并使用'key's以保证回收利用。 – Kujira

看看使用react-redux。它为你解决了这个问题http://redux.js.org/docs/basics/UsageWithReact.html –

答

您正在更改所谓的虚拟DOM节点。对于虚拟节点shouldComponentUpdate()中的每个更改都会被调用。如果你没有自己实现它，它将永远return true;

所以，如果你只想在特定情况下重新加载你的CookingClass你必须自己实现它。

React的专业是当它们在虚拟DOM中被更改时它只会重新呈现Native DOM节点。这是让React如此之快的“渲染”。

值得注意的是，当使用官方'react-redux'绑定时，'shouldComponentUpdate'被实现并且不总是*返回真正。 –

答

real DOM渲染完全由React处理，效率非常高效innerHTML插入，仅适用于应用程序VirtualDomTree的新数据结构中的更改。

shouldComponentUpdate()控制组件是否应该重新计算或不。例如，当您渲染静态数据时，您应该使用它。组件的输出不会改变，因此您只需返回false，组件的第一个版本将永久使用;）

答

根据您的示例代码，该组件将每次都重新呈现。

您应该使用react-redux（documentation）绑定将组件连接到商店。

// ConnectedCookingClass.js 
import { connect } from 'react-redux'; 
import CookingClass from './CookingClass'; 

const mapStateToProps = (state) => { 
    return { 
    teachers: state.teachers, 
    students: state.students 
    }; 
}; 

const ConnectedCookingClass = connect(mapStateToProps)(CookingClass); 

export default ConnectedCookingClass;

然后在其他地方使用该组件，像这样：

// OtherComponent.js 
import ConnectedCookingClass from './ConnectedCookingClass'; 

const OtherComponent = React.createElement({ 
    render() { 
    return (
     <div> 
     <ConnectedCookingClass /> 
     </div> 
    ); 
    } 
});

的反应，终极版绑定会做一些聪明的东西给你，只喜欢重新呈现组件时，道具由归国mapStateToProps实际上与以前的值不同（via a shallowEqual comparison），所以您应该尝试仅返回值，而不是函数。函数应在mapDispatchToProps中返回。

的shouldComponentUpdate的反应，终极版的默认实现将返回true时：

ALWAYS如果组件是一个“纯”成分（又名stateless-function）
当道具已经被手动更新（后componentWillReceiveProps调用）
当商店发生变化时，新的道具与旧的道具不同。

这里是看起来像从source code：

shouldComponentUpdate() { 
    return !pure || this.haveOwnPropsChanged || this.hasStoreStateChanged 
}

更新道具是否应该重新渲染整个组件？

相关推荐