初探React

Posted 2021-09-24 忘れられたくない

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 (
        <TodoItem
          content={item}
          key={index}
          index={index}
          delete={this.handleDlete}
        ></TodoItem>
      );
    });
  }
  render() {
    return (
      <React.Fragment>
        <div>
          <input
            value={this.state.inputValue}
            onChange={this.handleInputChange}
          ></input>
          <button className="red-btn" style={{borderRadius:\'2px\',padding:\'5px 10px\'}} onClick={this.handleBtnClick}>add</button>
        </div>
        <ul>{this.getTodoItems()}</ul>
      </React.Fragment>
    );
  }
}

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 <div onClick={this.handleDelete}>{content}</div>;
  }
}

export default TodoItem;

---