为什么我的 reactJs 没有重新渲染答案

【问题标题】：Why isn't my reactJs re-rendering为什么我的 reactJs 没有重新渲染
【发布时间】：2014-08-20 07:25:27
【问题描述】：

我真的厌倦了模型绑定，并且正在尝试开始使用 React，因为我真的很喜欢整个无状态的想法。我浏览了教程，看起来很简单。

但是，在我自己的应用程序中，我很困惑为什么我的组件没有在状态更改时重新渲染。这是我在 coffeescript 中的整个应用程序（来自 lodash 的_ helpers）。

mapObject = _.compose _.object, _.map

racers = mapObject ['red', 'blue', 'green'], (name) -> 
    [name, (key: name, class: name, position: 0)]

advance = (character) ->
    racers[character].position += 5;
    console.log character, "position is", racers[character].position
    view.setState racers: racers

R = React.DOM

Racer = React.createClass 
    getInitialState: -> @props
    render: ->
        R.div (className: 'racer '+@state.class, style: (left: @state.position)), ""+@state.position

Racelane = React.createClass render: -> 
    R.li (onClick: _.partial advance, @props.key), Racer @props

Racetrack = React.createClass 
    getInitialState: -> @props
    render: ->
        R.ul (className: 'lanes'), _.map @state.racers, Racelane

view = React.renderComponent (Racetrack racers: racers), (document.querySelector '#racetrack')

Here it is live

我们基本上在 3 个通道中有 3 个 div。当您单击每个通道时，每个 div 都应该在其上移动（调整了左侧的内联样式）。

我定义了一个高级方法来修改我的racers 对象，然后在我的视图根上调用 setState。而立场……没有改变。

我知道我在正确的轨道上，如果我没有改变位置，而是删除或添加了一个赛车手，它应该可以正常工作 - 但它不会重新渲染一个级别。我做错了什么？

【问题讨论】：

我不太习惯 Coffeescript 语法，所以这需要更多时间来回答。下次我认为将这种简短的示例转换为原始 JS 会很好。
感谢您的努力。问题当然是原始 js 将是垂直长度的两倍 :)

标签： javascript reactjs

【解决方案1】：

当您在根RaceTrack 组件上调用setState 时，它将触发重绘并通过道具将新的赛车位置传递给Racer 组件。但是，这些新位置最终会被忽略：当第一次创建赛车时，您将它们的初始位置存储在它们的内部状态中，并且您正在基于此内部状态渲染 Racer 组件，而该内部状态永远不会更新。

一个快速的解决方法是更改赛车手以根据他们的道具而不是状态进行渲染。

http://jsbin.com/bilejeyu/1/edit

Racer = React.createClass 
    render: ->
        R.div (className: 'racer '+@props.class, style: (left: @props.position)), ""+@props.position

总结一下，我认为这里最大的教训是，在使用 React 时，你应该尽量避免冗余状态。让根组件成为唯一具有状态的组件并为所有内容使用道具是一种常见的模式。

【讨论】：

哦，这很有道理（而且看起来这也是一个更好的模式）

【解决方案2】：

我认为确保组件重绘的最简单方法是更改 key 属性。对元素键的任何更改都将迫使它完全重绘。如果你让key值依赖于props，那也能解决问题。

【讨论】：