react给当前元素添加一个类以及key的作用

给当前元素添加一个类是通过className来处理的；

引入css;直接from XXXX

import React, { Component } from "react";
// 以内css,直接form
import "./base.css"
export class TestHanderClick extends Component {
  constructor(props) {
    super(props);
    this.state={
      num:1,
    }
  }

  hander(index){
    // 传递参数
    this.setState({
      num:index
    })
  }

  render() {
    return (
      <div>
        <div onClick={this.hander.bind(this,1)} className={ this.state.num==1 ? 'active' : ''}>11111111</div>
        <div onClick={this.hander.bind(this,2)} className={ this.state.num==2 ? 'active' : ''}>222222</div>
        <div onClick={this.hander.bind(this,3)} className={ this.state.num==3 ? 'active' : ''}>333333</div>
      </div>
    );
  }
}

export default TestHanderClick;

优化一下

import React, { Component } from "react";
// 以内css,直接form
import "./base.css"
export class TestHanderClick extends Component {
  constructor(props) {
    super(props);
    this.state={
      num:1,
      listArr:[
        {cont:"111",index:1},
        {cont:"222",index:2},
        {cont:"333",index:3},
        {cont:"4444",index:4},

      ]
    }
  }

  hander(index){
    // 传递参数
    this.setState({
      num:index
    })
  }

  render() {
    return (
      <div>
        {this.state.listArr.map(item=>{
          return <div key={item.index}  onClick={this.hander.bind(this,item.index)}
                 className={ this.state.num===item.index ? 'active' : ''}>{item.cont}</div>
        })}
      </div>
    );
  }
}

export default TestHanderClick;

如果数据中没有提供索引值，你应该利用map函数中第二个参数i，它代表索引值

强烈不推荐，使用map自带的i；

最好使用数据源中的标识，

因为数据源中的标识，

它发现数据有些不需要跟新的时候,

就不会改动不变化的，将需要改动的值插入进来。

如果你使用的是map中的index,那么不管数据有没有变化，它都是将所有的数据销毁后，然后重新插入新的值；

这样的话，react的渲染速度就大不一样了；

这样key才能够提高跟新效率，

如果你一直使用的是map中的index来作为key,那你写了当白写哈（手动滑稽）

 render() {
    return (
      <div>
        {this.state.listArr.map((item,index)=>{
          return <div key={index}  onClick={this.hander.bind(this,index)}
                 className={ this.state.num===index ? 'active' : ''}>
                  {item.cont}</div>
        })}
      </div>
    );
  }