react的性能优化

优化1：无状态组件的应用

列表渲染的利用无状态组件

import React, { Component } from 'react';

class EventComp extends Component {
  constructor () {
    super()
    this.state = {
      todos: [//这里是我们写的一个假数据，用来列表渲染
        {
          id: 1,
          task: '任务一'
        },
        {
          id: 2,
          task: '任务二'
        }
      ]
    }
  }

  renderItem = () => {
    return this.state.todos.map( item => <Item { ...item }  key = { item.id }/>)
  }

  render () {
    return (
      <div>
        <h3> 列表循环 </h3>
        <ul>
          {this.state.todos.map( item => <li key = { item.id }> { item.task } </li> }

        </ul>
      </div>
    )
  }

}


export default EventComp

上面是一个简单的列表渲染，如果我们直接在render里面渲染会显得冗余，所以通常我们会将内容分离出来，写一个函数，而函数中，箭头函数是最简洁的写法

所以我们可以讲render里面的内容，写成一个函数的调用

  renderItem = () => {//这是循环的函数表达式，直接return返回
    return this.state.todos.map( item => <li key = { item.id }> { item.task } </li> )

//因为我们说，react的优化之一是无状态组件的应用，，组件可以是一个元素，所以我们可以将上面的li，改写成一个组件。也就是下面的书写形式
		   return this.state.todos.map( item => <Item  key = item.id   {...item}/> )//在这个父元素组件内，我们将item这个参数传递过去  item= 'item',我们知道这个item是个对象，所以我们可以直接通过{...item}这种解构赋值的方式传递参数 
//注意 ⭐：key的值无法传递到子组件中，若要实现相同数据的传递，可使用其他名称作为属性名。访问key的值会返回undefined，所以我们直接在这个函数内定义了key值


	const  Item =（props ）=>{
		return 	<li> item.task </li>
     }
 }
 //注意这个子组件要定义在父组件外面，
 父组件内的是对象的键值对构成的

然后我们就可以在render里面直接调用这个函数

render () {
return (

列表循环

• 
  { renderItem（）}
  

)
}