React 实用基础合集（1）

1、JSX 主要注意点

1、react语法

   使用 {xxx这里面写表达式，可理解为动态内容，常规 判断或者 三元表达式}

   vue 使用 {{xxx这里放内容}} 这个叫vue模版

2、react样式

    写class 使用 className="xxx写这里"
        动态的  className = {this.state.class1}
    写style={{xx:"xx"}} 里面 大括号 可以拿出来 作为整体 然后再传入
      静态 怎么写 style="color: 'red'"
 

3、加载组件

    1、引入组件
    2、使用 <List xxx/> 传递属性 
        需要注意的是 react 组件命名开头必须为大写的 

4、判断条件和渲染列表 * 主要涉及

1、判断条件
if(xxx){}else{xxx}
2、三元
{ a ? b : c }
3、&& 
{a && b}

2、列表渲染

• 注意 map 返回新数组 是什么意思 ？

  不会更改元数组 内容

  返回的内容由map后的箭头函数 确定 map((item,index) => {xxx})

• 注意 map 需要 使用 key（需要为独一的值）

2、为何事件需要bind this ？

1、需要说这几件事情

2、注意点

1、react 事件写法 onXxxxx   比如 onClick={this.handle}  onChange={this.change1} 
2、绑定 this 在 constructor 里面写 更好 ，因为 只执行一次 ，如果绑定在按钮上会多次触发
3、绑定的函数 当前更加推荐的写法 这样 不用在bind绑定 this

* 关于 react 事件 异常重要的几件事情

1、event 是 react 合成的事件 非原生事件
2、虽为合成事件  但具备所有原生事件的能力
3、event.nativeEvent 是原生事件对象PointerEvent
4、事件被绑定到 document 上（16）

• 写个例子说明这个事情

import React from "react";

function handleClick(e) {
  e.preventDefault(); // 阻止默认事件
  e.stopPropagation(); // 阻止冒泡
  console.log("target", e.target); //a 标签
  //   console.log("current target", e.current.target); // TypeError: Cannot read property 'target' of undefined

  console.log("nativeEvent", e.nativeEvent); // PointerEvent{xxx}
  console.log("nativeEvent target", e.nativeEvent.target); // a标签
  console.log("nativeEvent current target", e.nativeEvent.current.target); // Cannot read property 'target' of undefined
}
function Event() {
  return (
    <a href="www.baidu.com" onClick={handleClick}>
      clike me
    </a>
  );
}

export default Event;

• 传递参数 在 bind(xxx,xxx,xxx) 默认传递的是 event

• 示意图

3、表单相关内容

1、主要部分

import React, { Component } from "react";

class Handle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "jack",
    };
  }
  handleChange = (e) => {
    this.setState({
      name: e.target.value,
    });
  };
  render() {
    return (
      <div>
        <p>{this.state.name}</p>
        <label htmlFor="inputValue">姓名：</label>
        <input
          id="inputValue"
          value={this.state.name}
          onChange={this.handleChange}
        ></input>
      </div>
    );
  }
}

export default Handle;

• 实现效果 就是 v-module vue里面的
• 受控 组件 受 state 控制

• 实现 效果展示

4、父子组件通讯

1、概述

2、重要的内容

1、状态（数据） 提升 将重要的数据部分 放到 最上层 父组件 管理， 子组件 只需要进行渲染 ， 父组件传递什么 子组件 就渲染什么
* 简单来讲 就是把 state里面定义的数据 放在最上层组件内

3、实践一下 写一个 ToDoList_1（因为在我这个项目中定义过 ToDoList）

import React, { Component } from "react";
import PropTypes from "prop-types";

class Input extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  onChange = (e) => {
    this.setState({
      title: e.target.value,
    });
  };
  onSubmit = () => {
    const { submit } = this.props;
    submit(this.state.title);
  };
  render() {
    return (
      <div>
        <input value={this.state.title} onChange={this.onChange}></input>
        <button onClick={this.onSubmit}>提交</button>
      </div>
    );
  }
}

//props 类型检查
Input.propTypes = {
  submit: PropTypes.func.isRequired,
};
function List(props) {
  const { list } = props;
  return (
    <ul>
      {list.map((item, index) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

//props 类型检查
List.propTypes = {
  list: PropTypes.arrayOf(PropTypes.object).isRequired,
};
class ToDoList_1 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [
        {
          id: 1,
          title: "text1",
        },
        {
          id: 2,
          title: "text2",
        },
      ],
    };
  }
  submit = (title) => {
    this.setState({
      list: this.state.list.concat({
        id: `id-${Date.now()}`,
        title,
      }),
    });
  };
  render() {
    return (
      <div>
        <Input submit={this.submit} />
        <List list={this.state.list} />
      </div>
    );
  }
}

export default ToDoList_1;

• 实现效果 非常nice