Javascript 重新组合异步道具更新

当从视图组件外部更改道具时，如何使用“重新组合”重新渲染组件

const Message = ({msg}) => <div>The prop has a value of <b>{msg}</b>.</div>

const App = Recompose.withProps(() => {
  let msg = 'One'

  // this async update doesn't work because nothing triggers a rerender
  setTimeout(() => {msg = 'Two'}, 500)

  return {msg}
})(Message)


ReactDOM.render(<App/>, document.getElementById('app'))

const Message=（{msg}）=>该属性的值为{msg}。
const-App=使用道具（（）=>{
让msg='One'
//此异步更新不起作用，因为没有任何内容会触发重新加载程序
setTimeout（（）=>{msg='Two'}，500）
返回{msg}
})（留言）
ReactDOM.render（，document.getElementById（'app'））

渲染此组件时，它将值显示为1，但在500毫秒后不会更改为2，即使它更改了道具

---

这里的

setTimeout

简化了在实际用例中我订阅websocket服务器，并且在推送消息时，消息组件会得到更新的情况。

免责声明：我还没有使用“主动重新组合”

但是我知道你的组件应该是有状态的。我发现

const enhance = withState('counter', 'setCounter', 0)
const Counter = enhance(({ counter, setCounter }) =>
  <div>
    Count: {counter}
    <button onClick={() => setCounter(n => n + 1)}>Increment</button>
    <button onClick={() => setCounter(n => n - 1)}>Decrement</button>
  </div>
)

const withMsg = withState('msg', 'setMessage', '');