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>
    );
  }