초기 반응

react 의 특징

구성 요소 화 모델, 성명 식 인 코딩 을 사용 하여 개발 효율 과 구성 요소 재 활용 율

을 높 인 다.

React Native 에서 React 문법 을 사용 하여 모 바 일 개발

가상 Dom + 우수한 Diffing 알고리즘 을 사용 하여 실제 Dom 과 의 조작 을 최소 화 합 니 다

가상 dom
1. 본질은 object 유형의 대상 (일반 대상)
2. 가상 dom 속성 이 비교적 적 고 진실 dom 속성 이 비교적 많 습 니 다. 가상 dom 은 react 내부 에서 재 활용 되 기 때문에 그렇게 많은 속성 이 필요 하지 않 습 니 다.
3. 가상 dom 은 최종 적 으로 react 에 의 해 진실 dom 으로 전환 되 어 페이지 에 나타난다.
1. react 프로젝트 만 들 기npx create-react-app my-app (npx 는 npm 5.2 + 첨부 된 package 실행 도구)index.js 입구 파일
2. 시작 항목npm start
3. jsx 문법
{} 을 이용 하여 js 표현 식 을 쓸 수 있 습 니 다. 예 를 들 어 {1 + 2}
js 문법 if 등 을 쓸 수 없습니다.
스타일 의 클래스 이름 은 class 를 사용 하지 말고 className
내 연 스타일, style = {key: value} 형식 으로 쓰 십시오.
해시 태그 하나만 있 을 수 있어 요.
라벨 을 닫 아야 합 니 다.
4 、 함수 this
함 수 는 아래 bind (this) 를 통 해 TodoList 구성 요 소 를 연결 합 니 다.this.handleBtnClick = this.handleBtnClick.bind(this)
5. 부자 구성 요소 전송 값
부모 구성 요소 가 속성 을 통 해 값 전달 하기;예:content={item} index={index}
react 뿌리 에 원소 패키지 만 있 을 수 있 습 니 다.Fragment 는react 의 세 션 은 페이지 에 표시 되 지 않 습 니 다.뿌리 에 두 개 이상 의 요소 가 있 는 데 사용 할 수 있 습 니 다.

import React from "react";
import TodoItem from "./TodoItem";
class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      inputValue: "",
    };

    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleBtnClick = this.handleBtnClick.bind(this);
    this.handleDlete = this.handleDlete.bind(this);
  }
  handleBtnClick() {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: "",
    });
  }
  handleInputChange(e) {
    this.setState({
      inputValue: e.target.value,
    });
  }
  handleDlete(index) {
    const list = [...this.state.list];
    list.splice(index, 1);
    this.setState({
      list,
    });
  }
  getTodoItems() {
    return this.state.list.map((item, index) => {
      return (
        
      );
    });
  }
  render() {
    return (
      
        

          
          add
        
        
{this.getTodoItems()}
      
    );
  }
}

export default TodoList;

하위 구성 요 소 는 props 를 통 해 수신 합 니 다.... 와 같다const { index } = this.props;

import React from "react";

class TodoItem extends React.Component {
  constructor(props) {
    super(props);
    this.handleDelete = this.handleDelete.bind(this);
  }
  handleDelete() {
    this.props.delete(this.props.index);
    // const { delete , index } = this.props;
    // delete index;
  }
  render() {
    const { content } = this.props;
    return 
{content}
;
  }
}

export default TodoItem;