React__ 一 、Reactj基础

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

---

前言

---

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

一、创建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基本知识，

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net