reactjs - 如何在 React Native 中重新渲染所有内容

Question

我的应用程序的主题(颜色和样式)是通过 REST API 提供的。每当服务器上的主题发生更改时，应用程序都会通过套接字通信收到通知，以便它可以通过 REST 获取新主题。

主题是在 Redux Saga 中获取的，颜色被保存到 Redux 存储(以启用持久化到磁盘)以及“全局”单例对象，我可以从任何地方访问该对象，即甚至非连接的组件。

当新主题到来时，我想重新渲染应用程序中的每个元素。我设法以一种黑客的方式重新渲染所有与商店连接的组件 - 通过注入(inject)一个虚拟属性，该属性在新主题更改时会发生变化。

有没有办法强制更新整个应用程序？

问题领域:

• dumb组件(不知道主题更改)

• 真正智能的组件(知道商店，但知道不会徒劳地重新渲染)

这是一个 hacky 强制重新渲染 react 导航的示例:

myAppContainer.render() {

  <AppRouter
    screenProps={this.props.styling}
  />
}

即我的 AppContainer 通过 mapStateToProps 获取 this.props.styling。包装的 StackNavigator 通过 screenProps 获取此信息，这会在商店获取新的样式数据时强制导航器重新渲染。

我不想继续走这条奇怪的道路。相反，我想要一个可以从我的 AppContainer 调用的 forceUpdateEverything() 函数。有这样的事吗？

<小时/>

编辑评论@bennygenel的答案:

我认为本尼所描述的基本上就是我所做的。 this.props.styling 中的更改会触发重新渲染。

但我必须将其实现到所有组件中，并通过其 screenProps 进行“黑客” react 导航，正如我所描述的那样。这是我希望避免的，但我想我必须走很长的路..

我使用的是immutable.js，因此发送完整的样式而不仅仅是主题名称没什么大不了的，因为它只是一个指针，可以快速与以前的值进行比较以查找更改。

除了在调用它的组件上之外，我没有让forceUpdate() 工作。我认为它不会递归地传播到所有子级。

Answer 1

我认为执行此操作的最简单且最具性能的方法，而不是将所有样式对象保留在您的状态和 redux 中，您可以只保留某种主题标识符。这样，当您的组件使用的主题发生任何更改时，都可以应用。

在react中有一个方法叫做 forceUpdate 。虽然这听起来像是您正在寻找的东西，但使用它并不是一个很好的做法。

来自 react 文档；

By default, when your component’s state or props change, your component will re-render. If your render() method depends on some other data, you can tell React that the component needs re-rendering by calling forceUpdate().

Calling forceUpdate() will cause render() to be called on the component, skipping shouldComponentUpdate(). This will trigger the normal lifecycle methods for child components, including the shouldComponentUpdate() method of each child. React will still only update the DOM if the markup changes.

Normally you should try to avoid all uses of forceUpdate() and only read from this.props and this.state in render().

我认为您应该做的是在应用程序中创建主题逻辑并相应地更改主题。

示例

// styles.js
const styles = {
  button: {
    blue: {
      backgroundColor: 'blue'
    },
    red: {
      backgroundColor: 'red'
    },
    green: {
      backgroundColor: 'green'
    }    
  }
};

export default styles;

// Dumb component example
import styles from './styles';

const Button = (props) => {
  return <Button {...props} style={[props.style, styles.button[props.theme]]} />
};

// Complex component example
import styles from './styles';

export default Button extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const {style, theme} = this.props;
    return <Button {...this.props} style={[style, styles.button[theme]]} />
  }
}

// usage in another component
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Button from './components/Button'; // Custom button component
import styles from './styles';

export default App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return(
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Change code in the editor and watch it change on your phone!
          Save to get a shareable url. You get a new url each time you save.
        </Text>
        <Button theme="blue" {/* other Button component props */} />
      </View>
    );
  }
}

在我的示例中，我使用定义为硬编码对象的样式。您可以向其中添加 API 调用和套接字通信逻辑。

在示例中，我不必将完整的样式对象从一个组件/屏幕传递到另一个组件/屏幕，而是只需传递主题名称，并且 theme 属性上的任何更改都将强制组件从中获取新的样式对象样式常量。

不需要为每个对象设置主题。您可以在对象中使用更高的属性。

示例

const styles = {
  id5248698745: {
    button: {
      backgroundColor: 'green'
    },
    label: {
      color: 'yellow',
      fontSize: 18
    },
    paragraph: {
      color: 'red',
      fontSize: 19
    },
    headings: {
      color: 'wihte',
      fontSize: 24
    }
  }
};

// ...
render() {
    const {style, theme} = this.props;
    return <Button {...this.props} style={[style, styles[theme].button]} />
}

// ...
// <Button theme={this.props.themeId} {/* other Button component props */} />