React__ 一 、Reactj基础

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、创建react项目
• • 创建项目模板
  • 文件目录
  • JSX基础语法
  • react基础
  • • 事件绑定
    • useState
    • [安装插件lodash js方法插件](#安装插件lodash js方法插件)
    • [css className封装方法](#css className封装方法)
    • useRef
    • 随机数插件uuid和时间格式化插件dayjs
  • React组件通信
  • • 父传子
    • 子传父
    • 兄弟组件
    • [使用 useContext和createContext实现组件传参（父级往下传，单向）](#使用 useContext和createContext实现组件传参（父级往下传，单向）)
    • 事件总线events插件
    • [useEffect 发送ajax更改DOM等操作](#useEffect 发送ajax更改DOM等操作)
• 总结

---

前言

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、创建react项目

创建项目模板

// 创建通用模板或 ts模板等，官网上可查模板
create-react-app react_js
create-react-app react_ts --template typescript

文件目录

JSX基础语法

• 基础渲染，列表，变量，条件渲染和className样式类名，style行内样式
  

react基础

事件绑定

useState

• useState响应式变量设置
• 不可直接修改a,seta设置变量a
• 直接修改视图不会更新

import './App.css';
import { useState } from 'react';

const [a,seta] = useState({
 a:'1',
})
const click = ()=>{
   seta({
   ...a,
   b:'2'
   })
}
function App() {
  return (
    <div className="App" onClick={click}>
      {a}
    </div>
  );
}

export default App;

• 绑定表单元素
  

安装插件lodash js方法插件

• js方法插件
• lodash 更多方法可以看官网或搜索

import './App.css';
import { useState } from 'react';
import _ from "lodash"

function App() {
  const [a] = useState('0')
  const b = _.clone(a)
  return (
    <div className="App">
      {a}
    </div>
  );
}

export default App;

css className封装方法

• 可以尝试着使用，感觉有点鸡肋

useRef

• 获取DOM元素

import './App.css';
import { useEffect, useRef, useState } from 'react';
import _ from "lodash"
function App() {
  const c= useRef(null)
  useEffect(()=>{
    console.log(c.current);
  },[])
  return (
    <div 
    className="App active"
    ref={c}
    >
    </div>
  );
}

export default App;

随机数插件uuid和时间格式化插件dayjs

• 详细方法搜索官网
  
  当前时间

React组件通信

父传子

• 父组件使用属性传递

• 子组件用porps接收值
  只能传递使用不可直接修改，使用子传父可修改

当在组件里面嵌套时，使用children获取

子传父

通过父组件自定义组件方法，在子组件调用方法传递值到这个函数

兄弟组件

使用子传父再父传子可以实现

使用 useContext和createContext实现组件传参（父级往下传，单向）

Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。请谨慎使用，因为这会使得组件的复用性变差

• 创建context.js

import { createContext } from "react";
导出createContext为公用
export const Context =createContext()

• app.js引入，使用组件方法Context.Provider，value传值

import './App.css';
import { EventEmitter } from "events";
import Home from "./components/home";
import { Context } from "./utils/context";

// BUS
const eventsBus = new EventEmitter()

// createContext
function App() {
  const a = 'green'
  // 
    eventsBus.addListener('name',(messame,num)=>{
    console.log(messame,num);
  })
  return (
    <div 
    className="App active"
    >
      <Context.Provider value={a}>
      <Home eventsBus={eventsBus}>
        <span>12222</span>
      </Home>
      </Context.Provider>
    </div>
  );
}

export default App;

• home 子组件引入context.js使用useContext获取值

// BUS
import { Context } from "../utils/context";
import { useContext } from "react";
function Home() {
  // eventsBus.emit('name','sssssssssss',123)
  const msg = useContext(Context)
  console.log(msg,":::::::");
  return (
    <div>
      aasdasd
      {msg}
    </div>
  )
}

export default Home;

事件总线events插件

安装npm i events

npm i events

创建公用的方法导出

import { EventEmitter } from "events";
export const eventsBus = new EventEmitter()

app.js引入使用

eventsBus.emit创建状态传递值

第一个是参数名，后面的为值

import { useEffect } from 'react';
import './App.css';

import Home from "./components/home";
// BUS
import { eventsBus } from "./utils/eventBus";

// createContext
function App() {
  useEffect(()=>{
    eventsBus.emit('name','sssssssssss',123)
  })
  return (
    <div 
    className="App active"
    >
      <Home eventsBus={eventsBus}>
        <span>12222</span>
      </Home>
    </div>
  );
}

export default App;

home.js子组件引入方法读取值,并使用

// BUS
import { eventsBus } from "../utils/eventBus";
function Home() {
  eventsBus.addListener('name',(messame,num)=>{
    console.log(messame,num);
  })
  return (
    <div>
      aasdasd
    </div>
  )
}

export default Home;

useEffect 发送ajax更改DOM等操作

第二个参数不传执行一次，更新执行

传空数组，只执行一次

传依赖项，初始一次，依赖项更新时一次

useEffect return清除副作用,（常用）
所有hooks要在组件内的顶层使用

### 封装自定义Hook

创建.js文件封装hook自定义

import { useState } from "react";
export function useHook(){
  const [a,seta] = useState(true)
  const toggle = ()=>seta(!a)
  return{
    a,
    toggle
  }
}

导入，解构并使用

### 运行json文件启动服务

---

总结

一些react基本知识，