React的入门

特点

组件化思维
单向数据流
虚拟dom

竞品

react
angular
vue

一、下载(我的是在node.js环境下搞的)

先在全局安装脚手架 即npm i -g create-react-app

创建项目

create-react-app myreact 创建myreact项目
cd myreact
npm start
运行myreact项目 一般这种安装完系统都会提醒你怎么进入与开启的

项目中的目录（简单介绍）

jsx语法

说明：javascript与html混合的写法（需要编译器编译才能被浏览器执行）

在{} 中执行js
有且只有一个根节点
{/* 注释内容*/}
类名使用className
数组可以有html标签
style对象会自动展开

实例

//在APP.css中编写
import "./App.css";
function App() {
  return (
    <div>
      <h1 className="active">你好react</h1>
    </div>
  );
}
export default App;

模板语法

文本渲染、条件渲染、列表渲染

var styles = {
  fontSize: "48px",
  textAlign: "center",
  color: "green",
};
var arr = [
  <h2>我是老大</h2>,
  <p>那就是个p标签</p>,
  <a href="http: / /www. baidu.com">百度</a>,
];

function App() {
  return (
    <div>
      <p style={styles}>学会react 月薪10w</p>
      {arr}
      <p>{2 + 4}</p>
      <p>{5 > 10 ? "大于10" : "他还是个孩子"}</p>
    </div>
  );
}
export default App;

组件（推荐使用函数组件）

函数组件

负责展示，也称为视图组件 ，props 父组件传递的参数，没有this

类组件

父处理数据，也称为容器组件
state 数据
有生命周期
props 父组件传递的参数
有this

事件与响应函数

onClick={()=>{ 响应内容}}
onClick={this.function}

函数的参数

匿名函数：onClick={()=>this.say(参数))}
bind：onClick = {this.Hi.bind(this,参数)}

state数据

更新数据：this.setState({k:v})

表单

受控表单

state与表单绑定

<input value={this.state.msg} onChange={()=>this.setState({msg:e.target.value})}

非受控表单

通过ref

import {createRef} from 'React'
this.inpRef = createRef()
<input ref={this.inpRef}/>
<button onClick={()=>alert(this.inpRef.current.value)}>

组件的传参

容器组件App
state.color
state.size
state.msg 文本
setColor
setSize 两个方法
Size 控制大小
Color 控制颜色

import React, { Component } from "react";
import Color from "./components/Color";
import Size from "./components/Size";
class App extends Component {
  state = { msg: "传参", color: "#ff0000", size: 28 };
  setColor = (color) => this.setState({ color });
  setSize = (size) => this.setState({ size });
  //渲染内容
  render() {
    return (
      <div>
        <p
          style={{ color: this.state.color, fontSize: this.state.size + "px" }}
        >
          {this.state.msg}
        </p>
        <Color setColor={this.setColor} >
          <p>组件的插槽</p>
        </Color>
        <Size setSize={this.setSize} size={this.state.size}></Size>
      </div>
    );
  }
}
//color组件
function Color(props) {
  return (
    <div>
      <h3>控制大小颜色{props.color}</h3>
      <input
        type="color"
        onChange={(e) => {
          props.setColor(e.target.value);
        }}
        value={props.color}
      />
      {props.children}
    </div>
  );
}
export default Color;
Color.defaultProps = { color: "#FFFF00" };//默认

生命周期

挂载constructor（挂载进度1）
挂载getDerivedStateFromProps（挂载进度2）
挂载render（挂载进度3）
挂载componentDidMount（挂载进度4）
更新getDerivedStateFromProps（更新进度1）
更新shouldComponentUpdate（更新进度2）
更新render（更新进度3）
更新getSnapshotBeforeUpdate（更新进度4）
更新componentDidUpdate（更新进度5）

import { useState, useEffect } from "react";//使用数据，以及副作用（不一定完全准确）
function App() {
  const [count, setCount] = useState(100);
  const [num, setNum] = useState(5);
  useEffect(() => {
    console.log("回调函数模拟cdm");
  }, []);
  useEffect(() => {
    console.log("回调函数模拟num的更新");
  }, [num, count]);
  return (
    <div>
      <h1>hooks</h1>
      <p>函数组件拥有模拟生命周期，模拟state，模拟ref的能力</p>
      <button onClick={() => setNum(num + 1)}>{num}</button>
      <button onClick={() => setCount(count + 5)}>{count}</button>
    </div>
  );
}

export default App;