React TodoList功能案例 学习笔记

• 定义组件

import React,{Component} from "react";

class App extends Component {
  render() {
    return <div className="App">hello wyh</div>;
  }
}

• 组件开头必须大写

  • 大写-组件标签
  • 小写-HTML标签

• 和VUE一样，每一个template必须要有一个标签包裹，如果不需要，则可以导如Fragment作为占位符

• onChange={this.handleInputChange.bind(this)}

• 如果每一个事件都bind(this)会影响性能，于是会在constructor函数里声明一次

// constructor固定写法，传入props super继承
 constructor(props) {
    // 调用父类的构造函数
    super(props);
    this.state = {
      inputValue: "",
      list: [1, 2, 3]
    };
    this.handleInputChange = this.handleInputChange.bind(this);
    this.submit = this.submit.bind(this);
    this.delete=this.delete.bind(this)
  }

• 同VUE中的data return，数据state 放在构造函数中声明注册

• VUE有三层：template、script、css；script中又是各阶段的生命周期

  • 对应的react，一个组件包含：
    • 注册组件，
    • class XXX extends Components{}
    • 声明构造函数、注册state
    • render(){ return (html&js)}
    • function

• render中文本作为HTML的标签输出

  • dangerouslySetHtml={{__html:XXX}}

• 变量冲突

  • class=> className
  • for=> htmlFor

• 组价绑定值或者传值，声明变量花括号包裹传值

 <TodoItem
  content={item}
  index={index}
  deleteItem={this.delete}
  key={index}
></TodoItem>

• 子组件接收

const {param}=this.props
{param}

• 传递方法也是一样的，state接收
• 子组件调用父组件方法或者传值
  • 数据单向流，通过事件派发出去

delete(){
    const {deleteItem,index}=this.props
    deleteItem(index)
}

• input 数据的双向绑定，需要传递this，并且通过e.target.value 拿到新值
• state值的修改使用this.setState，使用箭头函数访问到一个修改前的state的值prevState，可以直接操作
  • this.state((prevState)=>({xxx}))
  • this.state((prevState)=>{function; return {XXX}})

this.setState((prevState)=>({
      list: [...prevState.list, prevState.inputValue],
      inputValue: ""
    }))