1、事件处理中的this指针问题

在 react 中，用 class 声明一个组件，调用 class 中的方法时，如果该方法中有 this 且没有手动绑定 this 指针，则会发生 this 指向 undefined 的问题。

class LoggingButton extends React.Component {constructor(props) {    super(props);    this.state = {isToggleOn: true}  }   handleClick() {    this.setState(prevState => ({  //报错，this 指向 undefined，没有setState方法      isToggleOn: !prevState.isToggleOn    }));  }  render() {    return (              Click me          );  }}

1.1、如何手动绑定方法中的 this 指针

1.1.1、在构造函数中用 bind 绑定 this

constructor(props) {    //下面手动绑定了handleClick方法的this指针    this.handleClick = this.handleClick.bind(this);}

1.1.2、在调用时用 bind 绑定 this

class Test extends React.Component {    constructor (props) {        super(props)        this.state = {message: 'Allo!'}    }    handleClick (name, e) {        console.log(this.state.message + name)    }    render () {        return (            
     
                      //下面在调用时绑定了this指针，并进行了传参                   
      Say Hello            
     
        )    }}

1.1.3、用箭头函数声明函数

class Home extends React.Component {  constructor(props) {    super(props);    this.state = { isToggleOn: true };  }  //用箭头函数声明可以绑定this  handleClick = () => {    this.setState(prevState => ({      isToggleOn: !prevState.isToggleOn    }));  }  render() {    return (              {
    this.state.isToggleOn ? 'ON' : 'OFF'}          );  }}

1.1.4、用箭头函数调用class中的函数

render() {    return (     //用箭头函数来调用       {
   this.handleClick(params, e)} }>        {
    this.state.isToggleOn ? 'ON' : 'OFF'}          );}

1.1.5、使用React.createClass

React 15及以下的版本可以React.createClass函数来创建一个组件。你在里面创建的所有函数的this将会自动绑定到组件上。

const App = React.createClass({ handleClick() {  console.log('this', this); // this 指向App组件本身 }, render() {  return (   
     
      test
     
  ); }});

但是需要注意随着React 16版本的发布官方已经将改方法从React中移除

 

1.2、为什么要手动绑定 this

还是有点模糊，给出一些参考链接

参考：、

 

2、列表渲染时，key只需在兄弟元素之间唯一

react 在进行列表渲染时，数组元素中使用的 key 在其兄弟之间应该是独一无二的。然而，它们并不需要是全局唯一的，即如果不是同一列表的兄弟元素 key 值可以重复。当我们生成两个不同的数组时，我们可以使用相同的键

function Blog(props) {  const sidebar = (    
     
            {props.posts.map((post) =>        
      
          {post.title}        
      )}    
     
  );  const content = props.posts.map((post) =>    
     
      
      
{post.title}
      
      
{post.content}
    
     
  );  return (    
     
            {sidebar}      
      
      {content}    
     
  );}const posts = [  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},  {id: 2, title: 'Installation', content: 'You can install React from npm.'}];ReactDOM.render(  
     ,  document.getElementById('root'));