React로 TodoList를 구현하는 자세한 단계

이번에는 React를 사용하여 TodoList를 구현하는 세부 단계를 가져왔습니다. 이 기사에서는 자세한 분석을 제공합니다.

먼저 구현될 기능에 대해 이야기하겠습니다

(1) 작업을 추가할 수 있습니다.
(2) 완료된 작업과 완료되지 않은 작업은 색상으로 구분됩니다.
(3) 작업 추가, 작업 상태 수정, 작업 삭제 , 아래의 완료된 작업 수와 총 작업 수를 변경해야 합니다.

위는 구현되는 기능입니다.

2. 다음은 어떻게 디자인할까요?

(1) 작업 저장의 데이터 구조:

list: [{
      id: 0,
      name: '吃饭',
      status: 0
    }, {
      id: 1,
      name: '睡觉',
      status: 0
    }, {
      id: 2,
      name: '打豆豆',
      status : 0
    }]

각 작업에는 고유한 ID, 작업 이름 및 작업 상태가 있으며 작업의 고유성을 식별하는 것 외에도 작업 ID를 키로 사용할 수도 있습니다. 목록 항목의 값입니다. React에서 목록을 사용할 때 목록의 각 항목에는 키 값이 있어야 하며, 이를 통해 각 목록 항목을 빠르게 찾을 수 있고 Diff 알고리즘을 실행할 때 불필요한 쿼리가 줄어들어 성능이 향상됩니다.

(2) 구성 요소 분할

TodoList 전체를 큰 구성 요소로

목록의 각 목록 항목(ListItem)을 구성 요소로

작업 추가 상자(대화 상자).

3. 구체적인 구현

ListItem 구현을 예로 들어보겠습니다.

각 개별 항목이 독립적이고 코드의 논리가 더 단순해지도록 목록 항목을 별도로 구성 요소로 나누어야 합니다. 재사용성과 유지관리가 더 쉬워질 것입니다.

물론, 똑똑하다면 다음과 같은 질문이 떠오를 것입니다. 각 Task의 상태가 변경되거나 Task의 추가 및 삭제, 완료된 작업 수 및 총 수가 변경되지만 각 ListItem은 독립적입니다. 모직물을 어떻게 구현하나요? 이때 상위 컴포넌트와 하위 컴포넌트 간의 통신이 사용됩니다.

저와 같은 React 초보자라면 Baidu에 부모와 자식 구성 요소 간의 통신 방법에 대해 설명하는 기사가 많이 있을 것입니다. 저의 간단하고 대략적인 이해에 대해 간단히 말씀드리겠습니다.

상태 데이터 변경을 정의하세요. 메소드를 props 형태로 하위 컴포넌트에 전달하고, 하위 컴포넌트에서 이벤트 처리 프로그램을 실행한 후, 특정 조건이 충족되면 상위 컴포넌트가 전달한 함수를 실행합니다.

구체적인 코드는 다음과 같습니다.

상위 컴포넌트의 코드:

import React, { Component } from 'react';
import ListItem from './listItem';
import Dialog from './dialog';
import './main.css';
  
class TodoList extends Component {
  constructor (props) {
    super(props);
      
    //初始任务列表
    this.state = {
      list: [{
        id: 0,
        name: '吃饭',
        status: 0
      }, {
        id: 1,
        name: '睡觉',
        status: 0
      }, {
        id: 2,
        name: '打豆豆',
        status : 0
      }],
      finished: 0
    };
  }
    
  //添加新任务，在组件中以props的形式传递给子组件
  addTask (newitem) {
    var allTask = this.state.list;
    allTask.push(newitem);
    this.setState({
      list: allTask
    });
  }
  //更新完成的任务，在组件中以props的形式传递给子组件
  updateFinished (todoItem) {
    var sum = 0;
    this.state.list.forEach( (item) => {
      if (item.id === todoItem.id) {
        item.status = todoItem.status;
      }
      if (item.status === 1) {
        sum++;
      }
    });
    this.setState({
      finished: sum
    });
  }
  
  //更新任务总数，在组件中以props的形式传递给子组件
  updateTotal (todoItem) {
    var obj = [], sum = 0;
    this.state.list.forEach((item) => {
      if (item.id !== todoItem.id) {
        obj.push(item);
        if (item.status === 1 ) {
          sum++;
        }
      }
    });
    this.setState({
      list: obj,
      finished: sum
    });
  }
  
  render () {
    return (
      <div className="container">
        <h1>TodoList</h1>
        <ul>
          { this.state.list.map ((item, index) =>
            <ListItem 
              item={item} 
              finishedChange={this.updateFinished.bind(this)} 
              totalChange={this.updateTotal.bind(this)}
              key={index}
            />
          )}
          <li>{this.state.finished}已完成 / {this.state.list.length}总数</li>
        </ul>
        <Dialog addNewTask={this.addTask.bind(this)} nums={this.state.list.length}/>
      </div>
    );
  }
}
  
export default TodoList;

하위 컴포넌트의 코드:

import React, { Component } from 'react';
  
class ListItem extends Component {
  constructor (props) {
    super(props);
  
    this.handleFinished = this.handleFinished.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
  } 
  
  handleFinished () {
    var status = this.props.item.status;
  
    status = (status === 0 ? 1 : 0);
  
    var obj = {
      id: this.props.item.id,
      name: this.props.item.name,
      status: status
    }
      
    this.props.finishedChange(obj); //执行父组件传来的方法
  }
  
  handleDelete () {
    this.props.totalChange(this.props.item); //执行父组件传来的方法
  }
  
  render () {
    const item = this.props.item;
  
    const unfinish = {
      backgroundColor: '#DFFCB5',
      color: '#2EB872',
    };
  
    const finish = {
      backgroundColor: '#FFFA9D',
      color: '#FF9A3C',
      textDecoration: 'line-through'
    }
  
    var itemStyle = item.status === 0 ? unfinish : finish;
      
    return (
      <li key={item.id} style={itemStyle}>
        <span 
          onClick={this.handleFinished} 
          id={item.id}
          className="check-btn"
          style={{backgroundColor: item.status === 0 ? &#39;#fff&#39; : &#39;#A1EAFB&#39;}}
        ></span>
        <span>{ item.name }</span>
        <span onClick={this.handleDelete} className="delete-btn">删除</span>
      </li>
    );
  }
}
  
export default ListItem;

위는 저와 같은 반응 초보자라면 완료하세요. writing 나는 당신이 React

위의 소개를 읽고 나면 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹 사이트의 다른 관련 기사를 주목하십시오!

관련 읽기:

vue를 사용하여 로그인 확인을 구현하는 방법

Vue의 사용자 정의 지침을 사용하여 드롭다운 메뉴를 완성하는 방법

jQuery를 사용하여 배열 중복 제거 및 정렬

위 내용은 React로 TodoList를 구현하는 자세한 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!