React——进阶知识二（PureComponent、render props、Portals、错误边界、React事件）

一、PureComponent，纯组件

taskComponent.js

import React, { PureComponent } from 'react'
import TaskList from './TaskList.js'
import AddTask from './AddTask.js';

export default class TaskContainer extends PureComponent {

  state = {
    tasks: [],
  }

  handleAddTask = task => {
    this.setState({
      tasks: [...this.state.tasks, task]
    })
  }

  componentDidMount() {
    const tasks = [];
    for (let i = 0; i < 10; i++) {
      tasks.push({
        name: '任务名称' + (i + 1),
        isFinite: Math.random() > 0.5
      })
    }
    this.setState({
      tasks: tasks
    })
  }

  render() {
    return (
      <div className='task-container'>
        <AddTask onAddTask={this.handleAddTask}/>
        <TaskList tasks={this.state.tasks} />
      </div>
    )
  }
}

taskList.js

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import Task from './Task'

export default class TaskList extends PureComponent {

  static propTypes = {
    tasks: PropTypes.arrayOf(PropTypes.shape({
      name: PropTypes.string.isRequired,
      isFinite: PropTypes.bool.isRequired
    })).isRequired
  }

  render() {
    const taskList = this.props.tasks.map((it, i) => (
      <Task key={i} task={it}/>
    ))
    return (
      <ul>{taskList}</ul>
    )
  }
}

task.js

import React from 'react'
import PropTypes from 'prop-types'
import './task.css'

function Task(props) {
  return (
    <li className={props.task.isFinite ? 'task finite' : 'task'}>{props.task.name}</li>
  )
}

Task.propTypes = {
  task: PropTypes.shape({
    name: PropTypes.string.isRequired,
    isFinite: PropTypes.bool.isRequired
  })
}

// 函数组件的纯组件化
export default React.memo(Task);

addTask.js

import React, { PureComponent } from 'react'

export default class AddTask extends PureComponent {

  state = {
    name: ''
  }

  handleClick = e => {
    const task = {
      name: this.state.name,
      isFinite: false
    }
    this.props.onAddTask && this.props.onAddTask(task);
  }

  handleChange = e => {
    // 获取新的value值
    const newValue = e.target.value;
    this.setState({
      name: newValue
    })
  }

  render() {
    console.log('重新渲染AddTask组件')
    return (
      <div>
        <input type='text' name='taskName' value={this.state.name} onChange={this.handleChange} />
        <button onClick={this.handleClick}>添加任务</button>
      </div>
    )
  }
}

二、render props

三、Portals，让组件在指定的DOM下进行渲染

四、错误边界

五、React中的事件