Question

假设我的页面中有10个或更多组件，现在每当我使用setState更改状态时，都要对本机重新做出反应，以重新呈现所有组件（更改的组件和实际上不需要更改的所有其他组件）。

如何使本机反应仅重新呈现受状态更改影响的某些组件？我读过某个地方，您可以使用关键道具来做到这一点，但没有如何做的例子。

export default class MyApp extends React.Component({

    constructor(props) {
        super(props);
        this.state = {
            result: ''
        }
    }

    LoadChild() {
        // Some functions that load a tabnavigator component
    }

    render() {
        return(
            <View style={{ flex: 1}}>
                <ParentComponent>
                    <Text>
                        //Some Text that need to be updated
                        { this.state.result }
                    </Text>

                    <ChildComponent>
                        { this.LoadChild() }
                    </ChildComponent>
                </ParentComponent>
            </View>
        );
    }
});

每当我调用一个更改状态的函数（如setState（{result：'test'}））时，我都需要ParentComponent中的文本重新呈现以显示当前状态，但这也会导致ChildComponent重新呈现，从而导致函数LoadChild（）再次触发，因此componentDidMount（）也再次触发。我希望状态仅在状态更改时才影响ParentComponent中的文本。

Answer 1

您要寻找的是shouldComponentUpdate。已记录在here中。还要检查optimizing performance docs。

tldr：

当前，如果shouldComponentUpdate（）返回false，那么将不会调用UNSAFE_componentWillUpdate（），render（）和componentDidUpdate（）。

键的用途略有不同，请阅读here

React Native仅重新渲染某些组件

1 个答案: