- <div id="root"></div>
- <script src="./react.js"></script>
- <script src="./react-dom.js"></script>
- <script src="./babel.min.js"></script>
- <script type="text/babel">
- let value="112"
- function change(){
- value *= Math.random()*0.2
- alert(value)//value 变了 但视图没有因为 value 变化而更新
- const el=(<div><p>{value}</p><button onClick={change}> 点击修改 value 值 </button></div>)
- // 重新调用 render 函数才能更新
- // 但是 React 只会更新视图中发生改变得部分
- // 不会重新渲染 DOM,render 每次拿到得是一个对象, 元素对象得描述对象, 对象里面有一些键值对, 例如 {div }
- //react 一开始里面有一个完整得对象, 对象一开是空得, 第一次 ReactDOM.render 渲染后内存里就有对象了, 后面再 render 就会和内存里得对象进行比较
- ReactDOM.render(el,document.getElementById('root'))
- }
- const el=(<div><p>{value}</p><button onClick={change}> 点击修改 value 值 </button></div>)
- ReactDOM.render(el,document.getElementById('root'))
- </script>
来源: http://www.bubuko.com/infodetail-3232634.html