React__ 一 、Reactj基础

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

文章目录


前言


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

一、创建react项目

创建项目模板

go 复制代码
// 创建通用模板或 ts模板等,官网上可查模板
create-react-app react_js
create-react-app react_ts --template typescript

文件目录

JSX基础语法

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

react基础

事件绑定

useState

  • useState响应式变量设置
  • 不可直接修改a,seta设置变量a
  • 直接修改视图不会更新
js 复制代码
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 更多方法可以看官网或搜索
js 复制代码
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元素
js 复制代码
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
js 复制代码
import { createContext } from "react";
导出createContext为公用
export const Context =createContext()
  • app.js引入,使用组件方法Context.Provider,value传值
js 复制代码
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获取值
js 复制代码
// 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

js 复制代码
npm i events

创建公用的方法导出

js 复制代码
import { EventEmitter } from "events";
export const eventsBus = new EventEmitter()

app.js引入使用

eventsBus.emit创建状态传递值

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

js 复制代码
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子组件引入方法读取值,并使用

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自定义

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

导入,解构并使用

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


总结

一些react基本知识,

相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
画月的亮2 小时前
element-ui 使用过程中遇到的一些问题及解决方法
javascript·vue.js·ui
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
m0_526119402 小时前
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden
javascript·vue.js·elementui
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
lyj1689975 小时前
el-tree选中数据重组成树
javascript·vue.js·elementui
mosquito_lover17 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt