什麼會導致組件觸發更新週期和render（），但不能更改DOM？

我已經創建了一個HOC，它通過迭代所有子項並向它們添加屬性來操縱組件。什麼會導致組件觸發更新週期和render（），但不能更改DOM？

操縱組件初始渲染正確。但是，如果發生更改，則這些更改不會反映在DOM中。

我已通過日誌記錄檢查渲染和componentDidUpdate被觸發，具有正確的值。如果我不將組件包裝到HOC中，一切都按預期工作。

這是測試組件使用：

class ColorBox extends React.Component { 
    constructor(props) { 
     super(props) 
     this.state = { 
      value: 'rgb(0, 0, 0)' 
     } 
    } 
    componentDidUpdate() { 
     console.trace() 
    } 
    randomizeColor() { 
     const colArr = [] 
     for(let i=0; i<3; i++) { 
      const col = Math.round(Math.random() * 255) 
      colArr.push(col) 
     } 
     this.setState({ 
      value: `rgb(${colArr})` 
     }) 
    } 

    render() { 
     const style = { 
      width: '20px', 
      height: '20px', 
      backgroundColor: this.state.value 
     } 
     console.log(style) 
     return (
      <div> 
       <br /> 
       <button onClick={ this.randomizeColor.bind(this) }> 
        Randomize 
       </button> 
       <div style={ style } /> 
      </div> 
     ) 
    } 
}

當登錄樣式，顏色值都在變化，但DOM是沒有的。與解包組件唯一的區別是，當我運行console.trace（）時，包裝組件上的跟蹤堆棧更長。我只是不知道從那裏看什麼。

componentDidUpdate @ complex.js:118 
componentDidUpdate @ createPrototypeProxy.js:44 
measureLifeCyclePerf @ ReactCompositeComponent.js:75 
(anonymous) @ ReactCompositeComponent.js:729 
notifyAll @ CallbackQueue.js:76 
close @ ReactReconcileTransaction.js:80 
closeAll @ Transaction.js:206 
perform @ Transaction.js:153 
perform @ Transaction.js:140 
perform @ ReactUpdates.js:89 
flushBatchedUpdates @ ReactUpdates.js:172 
closeAll @ Transaction.js:206 
perform @ Transaction.js:153 
batchedUpdates @ ReactDefaultBatchingStrategy.js:62 
enqueueUpdate @ ReactUpdates.js:200 
enqueueUpdate @ ReactUpdateQueue.js:24 
enqueueSetState @ ReactUpdateQueue.js:219 
./node_modules/react/lib/ReactBaseClasses.js.ReactComponent.setState @ ReactBaseClasses.js:64 
randomizeColor @ complex.js:126 
randomizeColor @ createPrototypeProxy.js:44 
./node_modules/react-dom/lib/ReactErrorUtils.js.ReactErrorUtils.invokeGuardedCallback @ ReactErrorUtils.js:69 
executeDispatch @ EventPluginUtils.js:85 
executeDispatchesInOrder @ EventPluginUtils.js:108 
executeDispatchesAndRelease @ EventPluginHub.js:43 
executeDispatchesAndReleaseTopLevel @ EventPluginHub.js:54 
forEachAccumulated @ forEachAccumulated.js:24 
processEventQueue @ EventPluginHub.js:257 
runEventQueueInBatch @ ReactEventEmitterMixin.js:17 
handleTopLevel @ ReactEventEmitterMixin.js:28 
handleTopLevelImpl @ ReactEventListener.js:72 
perform @ Transaction.js:140 
batchedUpdates @ ReactDefaultBatchingStrategy.js:62 
batchedUpdates @ ReactUpdates.js:97 
dispatchEvent

我的問題是：什麼可以導致渲染被解僱但不更新DOM？我應該看什麼東西跟蹤堆棧？

來源

2017-08-02 Jaakko Karhu

你的代碼似乎很好。請參閱下面的代碼片段。我能想到的唯一的事情是，不是組件iteself，而是使用你用來渲染組件的方法。

class ColorBox extends React.Component { 
 
    constructor(props) { 
 
     super(props) 
 
     this.state = { 
 
      value: 'rgb(0, 0, 0)' 
 
     } 
 
    } 
 
    componentDidUpdate() { 
 
     console.trace() 
 
    } 
 
    randomizeColor() { 
 
     const colArr = [] 
 
     for(let i=0; i<3; i++) { 
 
      const col = Math.round(Math.random() * 255) 
 
      colArr.push(col) 
 
     } 
 
     this.setState({ 
 
      value: `rgb(${colArr})` 
 
     }) 
 
    } 
 

 
    render() { 
 
     const style = { 
 
      width: '20px', 
 
      height: '20px', 
 
      backgroundColor: this.state.value 
 
     } 
 
     console.log(style) 
 
     return (
 
      <div> 
 
       <br /> 
 
       <button onClick={ this.randomizeColor.bind(this) }> 
 
        Randomize 
 
       </button> 
 
       <div style={ style } /> 
 
      </div> 
 
     ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <ColorBox />, 
 
    document.body 
 
);

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
</head> 
 
<body> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
</body> 
 
</html>

來源

2017-08-02 23:22:29 thomasmeadows

什麼會導致組件觸發更新週期和render（），但不能更改DOM？

回答

相關問題