是不是不能直接修改 Dom

Duan112358 commented 8 years ago

有个组件拿到真实 Dom 后会进行一些操作，比如广告位的展示加入该组件后，会导致一下问题

react-lite.common.js:363 Uncaught TypeError: Cannot read property 'length' of undefined
destroyVelem @ react-lite.common.js:363
destroyVnode @ react-lite.common.js:147
destroyVelem @ react-lite.common.js:364
destroyVnode @ react-lite.common.js:147
destroyVcomponent @ react-lite.common.js:487
destroyVnode @ react-lite.common.js:150
destroyVelem @ react-lite.common.js:364
destroyVnode @ react-lite.common.js:147
destroyVcomponent @ react-lite.common.js:487
destroyVnode @ react-lite.common.js:150
destroyVcomponent @ react-lite.common.js:487
destroyVnode @ react-lite.common.js:150
destroyVcomponent @ react-lite.common.js:487
destroyVnode @ react-lite.common.js:150
compareTwoVnodes @ react-lite.common.js:576
forceUpdate @ react-lite.common.js:794
shouldUpdate @ react-lite.common.js:847
updateComponent @ react-lite.common.js:686
emitUpdate @ react-lite.common.js:673
updateVcomponent @ react-lite.common.js:468
updateVnode @ react-lite.common.js:64
compareTwoVnodes @ react-lite.common.js:581
forceUpdate @ react-lite.common.js:794
shouldUpdate @ react-lite.common.js:847
updateComponent @ react-lite.common.js:686
emitUpdate @ react-lite.common.js:673
updateVcomponent @ react-lite.common.js:468
updateVnode @ react-lite.common.js:64
compareTwoVnodes @ react-lite.common.js:581
forceUpdate @ react-lite.common.js:794
shouldUpdate @ react-lite.common.js:847
updateComponent @ react-lite.common.js:686
batchUpdate @ react-lite.common.js:653
dispatchEvent @ react-lite.common.js:962

由于这个错误导致后续的页面跳转也出现了问题

Lucifier129 commented 8 years ago

修改 dom 时不要删除、移动以及替换，其它跟 vdom 操作不冲突的修改应该是安全的，不然就没法做动画了。

Duan112358 commented 8 years ago

有替换操作 😿 ：有一点忘记提了，如果不用 react-lite 替换，react 环境是正常的，只在替换后出现上述问题。这个好解决吗？

Lucifier129 commented 8 years ago

react 看似正常，其实也埋下了内存泄漏的隐患。建议不要破坏性地丢改 vdom 生成的 dom，采取其它办法，比如 dangerouslySetInnerHTML ，在 componentDidMount 时把要直接操作的的 dom 放到 body 下面，componentWillUnmount 时移除即可。

Lucifier129 / react-lite

是不是不能直接修改 Dom #74