关于使用 rxjs 更新 React 函数式无状态组件的 props

Question

我想我可以使用 observable 每秒发送新的 props 并有一个反应（功能性，无状态）组件从而更新自身。我不确定我在这里错过了什么。这是 jsbin

const propsObs = Rx.Observable.from(['Butler', 'Fritz', 'Dusty', 'Petey'])
const inte = Rx.Observable.interval(1000).take(4)
var props={olddog:'Rusty'}
const propsOverTime = propsObs.zip(inte, (aprop,intx)=>aprop) 
propsOverTime.subscribe((x)=>{
  props={...props, olddog:x}
  console.log(props)
})

const App = (props) =>{
  console.log(props.olddog)
  const getDog=()=>props.olddog
  const thedog = getDog()
  return(
    <div><h4>hello {thedog}</h4></div>)
}
ReactDOM.render(<App {...props}/>, document.getElementById('app'))

Observable 每秒都会更改 props，每次都会创建一个新的 props 对象。这难道还不足以强制重新渲染组件吗？

Answer 1

一个功能性的 React 组件就是……一个函数。它不是 "watching" 它自己的更改道具。上游必须调用你的函数来获取新的 JSX。如果您有一个扩展 React.Component 的封闭组件，那么您可以调用 setState 并传入新的道具，或者在您的情况下，只需使用更新后的 JSX 调用 ReactDOM.render。

const App = props => {
  const getDog = () => props.olddog
  const thedog = getDog()
  return(
    <div><h4>hello {thedog}</h4></div>
  )
}

propsOverTime.subscribe(x => {
  props = {...props, olddog: x}
  ReactDOM.render(<App {...props}/>, document.getElementById('app'))
})

关于使用 rxjs 更新 React 函数式无状态组件的 props

on using rxjs to update props of a react functional stateless component

reactjs

functional-programming

observable

rxjs5

stateless