ReactJS - Keys - 学习 React - 简单教程，简单编程

React 是根据组件上设定的 key 属性来生成该组件唯一的标识，只有key改变了，React才会更新组件，否则重用该组件。如果想要更新组件内容，请保证每次的key都不一样

如果的组件是动态组件（需要动态更新），例如一个列表做展示时，能向列表添加或删除元素，此时组件是需要刷新的，刷新的依据就是key。

对于相同的key，React会采取和上一次刷新同样的方式。

对同一个元素，必须保证 key 唯一

组件的 Keys 使用范例

<!doctype html>
<meta charset="utf-8">
<title>React Keys -简单教程</title>
<script src="https://cdn.staticfile.org/react/15.5.4/react.min.js"></script>
<script src="https://cdn.staticfile.org/react/15.5.4/react-dom.min.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.24.0/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component {
   constructor() {
      super();

      this.state = {
data: [
   {
      component: '首先...',
      id: 1
   },

   {
      component: '其次...',
      id: 2
   },

   {
      component: '再次...',
      id: 3
   },
   {
      component: '第八次...',
      id: 8
   }
]
      }

   }

   render() {
      return (
         <div>
            <div>
               {this.state.data.map((dynamicComponent, i) => <Content 
                  key = {i} componentData = {dynamicComponent}/>)}
            </div>
         </div>
      );
   }
}

class Content extends React.Component {
   render() {
      return (
         <div>
            <div>{this.props.componentData.component}</div>
            <div>{this.props.componentData.id}</div>
         </div>
      );
   }
}
ReactDOM.render(<App/>, document.getElementById('root'));
</script>

运行范例 »

运行上面的应用我们会看到四组列表项 React Keys Example 如果我们给列表添加或者删除一些项，React 会根据列表项的 key 的值来追踪该元素