React 로 완전한 TodoList 의 예제 코드 를 실현 합 니 다.

프롤로그:계산 해 보 니 한 달 넘 게 블 로 그 를 쓰 지 않 았 습 니 다.최근 에 게 으 름 을 많이 피 웠 습 니 다.무엇 을 써 야 할 지 모 르 겠 습 니 다.최근 에 React 를 배 웠 습 니 다.이론 적 인 지식 을 계속 보고 있 습 니 다.무엇 을 써 서 연습 해 야 할 지 생각 이 들 었 습 니 다.그래서 간단 한 todoList 를 가지 고 예 를 들 어 보 겠 습 니 다!
1.우선 효과 도 에 따라 실현 할 기능 에 대해 이야기 해 주세요.

todoList 최종 효과 도
(1)퀘 스 트 를 추가 할 수 있 습 니 다.
(2)이미 완성 한 퀘 스 트 와 미 완성 퀘 스 트 의 색상 구분;
(3)퀘 스 트 추가,퀘 스 트 상태 수정,퀘 스 트 삭제 시 아래 퀘 스 트 완성 수량 과 퀘 스 트 총 수 를 변경 합 니 다.
이상 은 실현 해 야 할 기능 이다.
2.이제 어떻게 디자인 해 야 하나 요?
(1)작업 에 저 장 된 데이터 구조:

list: [{
      id: 0,
      name: '  ',
      status: 0
    }, {
      id: 1,
      name: '  ',
      status: 0
    }, {
      id: 2,
      name: '   ',
      status : 0
    }]

모든 작업 은 자신의 id,작업 이름,작업 상태 가 있 습 니 다.작업 의 id 는 표지 작업 의 유일 성 을 제외 하고 목록 항목 의 key 값 으로 도 사용 할 수 있 습 니 다.우 리 는 react 에서 목록 을 사용 하 는 것 을 알 고 있 습 니 다.목록 의 모든 항목 에 key 값 이 있어 야 합 니 다.그러면 모든 목록 항목 이 빠 른 포 지 셔 닝 을 할 수 있 고 Diff 알고리즘 을 실행 할 때 불필요 한 조 회 를 줄 여 성능 향상 에 도움 이 됩 니 다.
(2)구성 요소 의 구분

TodoList 는 전체적으로 큰 구성 요소 로 서

목록 의 모든 목록 항목(ListItem)을 구성 요소 로 합 니 다.

작업 의 추가 상자(Dialog)를 구성 요소 로 합 니 다.

구체 적 실현
목록 항목 ListItem 의 실현 을 예 로 들 면:
목록 항목 을 하나의 구성 요소 로 나 누 는 것 은 필수 적 입 니 다.이렇게 하면 모든 단독 항목 이 독립 되 고 코드 의 논 리 를 더욱 간단 하 게 하 며 코드 의 재 활용 성 을 강화 하고 유지 도 더욱 간단 해 집 니 다.
물론 똑똑 한 당신 은 하나의 문 제 를 생각 할 것 입 니 다.모든 Task 의 상태 가 바 뀌 거나 Task 의 추가 삭제,Task 의 완성 수량 과 전체 항목 이 바 뀌 지만 모든 ListItem 은 서로 독립 되 어 있 습 니 다.어떻게 실현 합 니까?이 때 는 부자 구성 요소 간 의 통신 을 사용 해 야 한다.
만약 당신 도 나 와 같은 React 의 초보 자 라면 바 이 두 는 부자 구성 요소 간 에 어떻게 통신 하 는 지 에 대해 많은 글 이 나 올 것 입 니 다.다음은 제 가 간단 하고 거 친 이 해 를 간단히 말씀 드 리 겠 습 니 다.
부자 구성 요소 에서 state 데 이 터 를 바 꾸 는 방법 을 정의 합 니 다.방법 을 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 ? '#fff' : '#A1EAFB'}}
        ></span>
        <span>{ item.name }</span>
        <span onClick={this.handleDelete} className="delete-btn">  </span>
      </li>
    );
  }
}

export default ListItem;

이상 은 이 작은 연습 에 대한 정리 입 니 다.만약 에 당신 도 나 처럼 react 초보 라면 이것 을 쓰 고 React 에 대해 더 가 까 운 이 해 를 가 질 것 이 라 고 믿 습 니 다.작은 연습 이상github에 전달 되 었 으 니 참고 하 실 수 있 습 니 다!여러분 의 학습 에 도움 이 되 기 를 바 랍 니 다.여러분 들 도 저 희 를 많이 응원 해 주시 기 바 랍 니 다.