当来自外部的值发生变化时，如何使组件重新渲染？

Question

所以，我有这样的简单代码（类）：

export default class LoginAction {
  isLoggedIn = () => {
    return true
  }
}

我在我的其他课程中这样使用它：

export default class Main extends Component {
  render = () => {
    const loginAction = new LoginAction()

    if (loginAction.isLoggedIn()) {
      return (
        <View style={{ flex: 1 }}>
          <Header headerText={'Post List'} />
          <PostList />
        </View>
      )
    }

    ....... (split)
  }
}

问题是，当我更改 isLoggedIn 函数的返回值时，为什么 Main 组件没有重新渲染？

它是 React Native，我使用热重载。

Answer 1

组件仅在 2 种情况下重新渲染：

• 如果其state 已更改
• 如果收到的props 发生了变化

在您的 Main 组件中，这些情况都不会发生。

要修复它，您可以将 isLoggedIn 传递给您的组件：

// index.js

const loginAction = new LoginAction()
let isLoggedIn = loginAction.isLoggedIn()

const setLoggedUser = user => {
  loginAction.setLoggedUser(user)
  isLoggedIn = true
}

ReactDOM.render(
  <div>
    {!isLoggedIn && <Login setLoggedUser={setLoggedUser} />}
    <Main isLoggedIn={isLoggedIn} />
  </div>,
  document.getElementById('root')
)

并在组件的渲染中使用这个道具：

export default class Main extends Component {
  render = () => {
    if (this.props.isLoggedIn) {
      return (
        <View style={{ flex: 1 }}>
          <Header headerText={'Post List'} />
          <PostList />
        </View>
      )
    }
    ...
  }
}

这样做时，您的组件将在isLoggedIn 更改时重新渲染。