1.驗證Diffing算法
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="test"></div><script src="../js/17.0.1/react.development.js "></script><script src="../js/17.0.1/react-dom.development.js"></script><script src="../js/17.0.1/babel.min.js"></script><!-- 對標簽屬性進行限制 --><script src="../js/17.0.1/prop-types.js"></script><script type="text/babel">class Time extends React.Component {state = { date: new Date() }componentDidMount() {setInterval(() => {this.setState({ date: new Date() })}, 1000)}render() {return (<div>現在時間是{this.state.date.toTimeString()}<input type="text" /></div>)}}ReactDOM.render(<Time />, document.getElementById('test'))</script>
</body></html>
這段代碼是一個使用 React 編寫的時鐘組件，它會每秒更新一次當前時間并顯示在頁面上,輸入框的數據始終沒變,是因為Diffing算法
diffing 算法通過比較虛擬 DOM 樹的差異，只更新實際 DOM 中發生變化的部分
2.key的作用
若使用index作為key值:請看代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="test"></div><script src="../js/17.0.1/react.development.js "></script><script src="../js/17.0.1/react-dom.development.js"></script><script src="../js/17.0.1/babel.min.js"></script><!-- 對標簽屬性進行限制 --><script src="../js/17.0.1/prop-types.js"></script><script type="text/babel">class Person extends React.Component {state = {persons: [{ id: 1, name: "小李", age: 18 },{ id: 2, name: "小張", age: 19 }]}add = () => {const { persons } = this.stateconst p = { id: persons.length, name: '小王', age: 20 }this.setState({ persons: [p, ...persons] })}render() {return (<div>{this.state.persons.map((item, index) => <li key={index}>{item.name}, {item.age}</li>)}<button onClick={this.add}>添加小王</button></div>)}}ReactDOM.render(<Person />, document.getElementById('test'))</script>
</body></html>
)
)
