React·基础Demo

//定义数据使Demo更新状态

import React, { useState,useReducer } from 'react'; //导入
function App() {
  var [data, setState] = useState({ name:'xx'  });//把所有数据定义在里面
  data.name = '你好'; //赋值
  //useState 不能过多定义使用，建议定义一个全局使用，类似微信小程序定义数据
    
  setState(res => ({ ...res, data }));//刷新整个数据
}

//更新对象类
setUser(res => ({ ...res, name:"xxxx" }))
//更新数组
setList({ ...arrlist});
setList([ ...arrlist]);

import "./App.css";
import React, { useRef } from "react";
//import axios from "axios";
import { useState, useEffect } from "react";
//vs cdoe 错误提示插件：error Lens 或 webstorm

//定义字符串
let str = "Linwute";

//定义整型
var int = 0;

//定义数组
let arr = ["1", "2"];

//对象数组
let arrObj = [
  { id: 1, name: "AAA" },
  { id: 2, name: "BBB" },
];

//箭头涵
const fun = () => {
  return "箭头涵";
};

//方法涵
function func() {
  return "方法涵";
}

//样式
const css = {
  color: "#f00",
  fontSize: "20px",
};

// 标签定义 及行内样式
const AAA = () => {
  return (
    <div>
      <h2>H2</h2>
      <text>BBBB</text>
    </div>
  );
};

// class => className; for => htmlFor;

//函数组件
function Hello() {
  //首字母必须大写 /点击事件
  return <div onClick={tap}>函数组件 hello</div>;
}
//类组件
class ComHello extends React.Component {
  render() {
    return <div>类组件 hello</div>;
  }
}

//点击事件
const tap = (e) => { //onClick={() => tap(1)}
  if (e === "") {
    console.log("点击事件");
  } else {
    console.log("点击事件:", e);
  }

  //e.preventDefault(); //阻止默认方法事件
};
//函数中附带触发组件
function Div(e) {
  console.log(e);
  return <div onClick={() => Div("ABC")}>函数中附带触发</div>;
}

//接收输入
const inputChang = (e) => {
  console.log(e.target.value);
};
function InputDiv() {
  return (
    <div>
      <input onChange={inputChang} placeholder="输入" />
    </div>
  );
}

//删除数组
const tapDelete = (e) => {
  console.log(arr);
  arr.splice(0, 1)
}

//子组件
function ComA({ Text = 0, Data = 0 }) { //使用方式<Com text={111} data={22}/>
  return (
    <div>this in com the {Text}·{Data}</div>
  )
}
//生命周期 (DOM后再做数据请求)
//挂载时 constructor(初始化) =>(DOM后) render(每次触发) => componentDidMount
//== useEffect(()=>{})或者useEffect(()=>{},[n]) //第二个参数的是useState 的初始值； 第二个参数是空数组[],只会在组件挂载后运行一次。

//更新时 render(每次触发) =>(DOM后) componentDidUpdate
//== useEffect(()=>{})

//卸载时 (DOM后)componentWillUnmount
//useEffect(()=>{console.log('渲染的时候执行'); return ()=>{console.log('组件要关闭了')}})
// return 则表示组件关闭时开始执行


const Divif = () => {
  //三元运算符号
  let xx = true;

  return (
    <div>
      {xx === true ? <div>真</div> : <div>假</div>}
    </div>
  )
}
//异步
// const gets = async () => {
//   const res = await axios.get('http://xx')
//   console.log("异步", res)
// }
//异步
// async function getss() {
//   const res = await axios.get('http://xx')
//   console.log("异步", res)
// }

function App() {
  //累加
  const [add, tapAdd] = useState(0);//累加属性格式固定，参数2为方法名，参数1为属性
  console.log(add)
  useEffect(() => {
    console.log("生命钩子")
    return () => {
      // clearInterval(letxx) //清除动作
    }
  }, [])


  // ref获取DOM
  const aaRef = useRef(null);

  return (
    <div>
      <div><button onClick={() => tapAdd(add + 1)}> + </button></div>
      <li ref={aaRef}>字符串：{str}</li>
      <li>整型：{int}</li>
      <li>数组：{arr}</li>
      <li>箭头涵：{fun()}</li>
      <li>方法涵：{func()}</li>
      <li>三元运算：{int === 2 ? "对" : "错"}</li>

      <ul>
        数组map方式：
        {arr.map((arr, i) => (
          <li key={i}>{arr}</li>
        ))}
      </ul>

      <ul>
        数组map方式：
        {arrObj.map((arrObj) => (
          <li key={arrObj.id}>{arrObj.name}</li>
        ))}
      </ul>
      <div>标签：{AAA()}</div>
      <div style={css}>行内样式</div>
      <div style={css}>styleName类名样式</div>
      <Hello>组件</Hello>
      <ComHello>组件</ComHello>
      <div onClick={tap}>不带参 点击事件</div>
      <div onClick={() => tap(1)}>带参数 点击事件</div>
      <Div>组件</Div>
      <InputDiv />
      <div onClick={() => tapDelete(0)}>删除数组</div>
      <div><ComA Text={111} Data={22}></ComA> </div>
      <div><Divif></Divif></div>
    </div>
  );
}

export default App;