React从入门到精通

目录

jsx语法规则

 组件

关于类组件总结：

组件的三大核心：

---

jsx语法规则

   1、虚拟Dom不能加引号

   2、定义class需要使用ClassName

   3、写内联style需要例如：style={{color:'red',font-size:'20px'}}

   4、获取变量需要写在{}中

   5、{}中只能写表达式

   6、循环生成虚拟dom需要加key唯一标识

   7、标签必须要闭合

 组件

  1、函数式组件

function Hello(props) {
  return <h1>Hello, world,{props.name}</h1>;
}
export default Hello;

   2、类组件

import "./clock.css";
import React from "react";
export default class Clock extends React.Component {
  state = { date: new Date()};
  componentDidMount() {
    // 组件挂载完成
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    // 组件卸载时
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date(),
    });
  }
  testFunc = () => {
    console.log("测试文本事件", this);
  };
  render() {
    return (
      <div>
        <h1
          className="title"
          style={{ fontSize: "20px" }}
          onClick={this.testFunc}
        >
          时间!
        </h1>
        <h2>
          It is {this.state.date.toLocaleTimeString()}.+++
          {this.props.test}
        </h2>
        <div>{this.props.children}</div>
        <>
          <dt>{55}</dt>
          <dd>{666}</dd>
        </>
      </div>
    );
  }
}

关于类组件总结：

1、类中构造器constructor可以不写

2、如果A类继承了B类，并且A类中写了构造器，必须要调用super方法

3、类中所有的方法，都是放在原型对象上的

4、定义的类名就是组件名

组件的三大核心：

1、state

      1.1、定义state

state = {
    numbers: [1, 2, 3, 4, 5],
 };

     1.2、修改state

this.setState({ numbers: [2,4,6,8]});
this.setState((state,props)=>({numbers:state.numbers}))
this.setState(function(state,props){
    return {num:state.num--}
  })

2、props（父子组件通信的桥梁）

     子组件

      2.1、propTypes：校验传过来的数据类型和必填校验

      2.2、defaultProps ：设置数据的默认值

      注意：需要定义static关键字将这两个属性定义在当前类中

     还可以通过{...this.obj}解构出一次性传多个属性给子组件

import "./clock.css";
import React from "react";
import PropTypes from "prop-types";
export default class Clock extends React.Component {
  state = { date: new Date() };

  // 添加类型，必填校验
  static propTypes = {
    test: PropTypes.number.isRequired,
    // 函数类型
    speack: PropTypes.func,
  };
  // 添加默认值
  static defaultProps = {
    test: 898,
  };

  componentDidMount() {
    // 组件挂载完成
    console.log(this);
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    // 组件卸载时
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date(),
    });
  }
  testFunc = () => {
    console.log("测试文本事件", this);
  };
  render() {
    return (
      <div>
        <h1
          className="title"
          style={{ fontSize: "20px" }}
          onClick={this.testFunc}
        >
          时间!
        </h1>
        <h2>
          It is {this.state.date.toLocaleTimeString()}.+++
          {this.props.test}
        </h2>
        <div>{this.props.children}</div>
        <>
          <dt>{55}</dt>
          <dd>{666}</dd>
        </>
      </div>
    );
  }
}

父组件

import "./App.css";
import Hello from "./hello";
import Clock from "./clock";
import React from "react";
export default class App extends React.Component {
  state = {
    numbers: [1, 2, 3, 4, 5],
  };
  handleChange = (event) => {
    this.setState({ value: event.target.value });
  };

  handleSubmit = (event) => {
    alert("A name was submitted: " + this.state.value);
    event.preventDefault();
  };
  render() {
    console.log("render", this);
    const listItems = this.state.numbers.map((number) => (
      <ol key={number}>{number * 2}</ol>
    ));
    return (
      <div className="App">
        <Clock test={1} color="red">
          <h1>hello react</h1>
          <ul>
            <li>6666</li>
          </ul>
        </Clock>
        <Hello name="xxxx"></Hello>
        <div className="App-header">
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React+++{this.props.name}
          </a>
        </div>
        <div>测试</div>
        <div>{2 > 1 && <h2>我是最后一个</h2>}</div>
        <ul>{listItems}</ul>
        <form onSubmit={this.handleSubmit}>
          <label>
            Name:
            <input
              type="text"
              value={this.state.value}
              onChange={this.handleChange}
            />
          </label>
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}

3、refs（获取dom节点）

 第一种方式：不推荐使用，效率不高，

import React from "react";
export default class Refsdemo extends React.Component {
  show = () => {
    console.log(this.refs.input1.value);
  };
  render() {
    return (
      <>
        <input ref="input1" />
        <button ref="btn" onClick={this.show}>
          refs测试
        </button>
        <input ref="input2" />
      </>
    );
  }
}

第二种方式