跳到主要内容

13、ReactJS - Keys

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

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

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

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

组件的 Keys 使用范例

<!doctype html>
<meta charset="utf-8">
<title>React Keys -DDKK.COM 弟弟快看,程序员编程资料站</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 会根据列表项的 key 的值来追踪该元素