React复习日志大纲

萧寂173

已于 2023-09-15 12:29:09 修改

阅读量652

点赞数 1

分类专栏： react 文章标签： react.js 前端前端框架

于 2023-09-11 21:44:30 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_68658847/article/details/132817957

版权

文章目录

React基础篇
React路由篇
Mobx
Redux使用

本套笔记对应视频

本套笔记对应语雀笔记

React基础篇

创建项目

npx create-react-app 项目名

a. npx create-react-app 是固定命令，create-react-app是React脚手架的名称
b. react-basic表示项目名称，可以自定义，保持语义化
c. npx 命令会帮助我们临时安装create-react-app包，然后初始化项目完成之后会自自动删掉，所以不需要全局安装create-react-app

启动项目

$ yarn start
or
$ npm start

项目目录说明调整

目录说明
– a. src 目录是我们写代码进行项目开发的目录
– b. package.json 中俩个核心库：react 、react-dom
目录调整
– a. 删除src目录下自带的所有文件，只保留app.js根组件和index.js
– b. 创建index.js文件作为项目的入口文件，在这个文件中书写react代码即可
入口文件说明

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
// 引入根组件App
import App from './App'
// 通过调用ReactDOM的render方法渲染App根组件到id为root的dom节点上
ReactDOM.render(
 <React.StrictMode>
   <App />
 </React.StrictMode>,
 document.getElementById('root')
)

index.js改造如下

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // 去掉严格模式节点
  // 会添加useEffect的执行时机
  // <React.StrictMode>
    <App />
  // </React.StrictMode>
);

项目src剩余目录

在这里插入图片描述

后续所有代码片段都是在App.js里面写的

01基本使用

// 1.识别常规变量
const name = "萧寂";
// 2.原生js方法调用
const getAge = () => {
   
  return 18;
};
// 3.三元运算符
const flag = true;

function App() {
   
  return (
    <div className="App">
      <div>{
   name}</div>
      <div>{
   getAge()}</div>
      <div>{
   flag ? "1234" : "456"}</div>
    </div>
  );
}

export default App;

02 列表渲染

// 列表渲染
// 注意事项,遍历列表时,同样需要一个不可重复的key
// key仅仅在内部使用,不会渲染到页面上

const songs = [
  {
    id: 1, name: "痴心绝对" },
  {
    id: 2, name: "像我这样的人" },
  {
    id: 3, name: "南山南" },
];

function App() {
   
  return (
    <div className="App">
      <ul>
        {
   songs.map((item) => (
          <li key={
   songs.id}>{
   item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

03 条件渲染

// 条件渲染
// 技术方案:1.三元表达式,2.逻辑运算符
const flag = true
function App() {
   
  return (
    <div className="App">
      {
   /* 条件渲染字符串 */}
      {
   flag ? "react真有趣" : "vue真有趣"}
      {
   /* 条件渲染标签/组件 */}
      {
   flag ? <h2>this is span</h2> : null}

      {
   /* 逻辑运算 */}
      {
   true && <h2>this is span</h2>}
    </div>
  );
}

export default App;

04 样式处理

// 样式处理
// 1.类名样式 导入样式
import "./04 app.css";
// 2.内联/行内样式,在元素身上绑定一个style即可
const style = {
    color: "red", fontSize: "30px" };

// 动态控制类名
const activeflag = true;
function App() {
   
  return (
    <div className="App">
      {
   /* 测试类名样式,通过className */}
      <span className={
   activeflag ? "active" : ""}>测试类名样式</span>
      <br></br>
      {
   /* 内联/行内样式 */}
      <span style={
   {
    color: "red", fontSize: "30px" }}>this is span</span>
      <br></br>
      <span style={
   style}>this is span</span>
    </div>
  );
}

export default App;

样式渲染对应的css文件内容为

.active{
   
    color: blue;
}

05 函数和类组件创建和渲染

import React from "react"
// 函数组件的创建和渲染
// 创建函数组件
// 1. 组件的名称必须首字母大写，react内部会根据这个来判断是组件还是普通的HTML标签
// 2. 函数组件必须有返回值，表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null
// 3. 组件就像 HTML 标签一样可以被渲染到页面中。组件表示的是一段结构内容，对于函数组件来说，渲染的内容是函数的返回值就是对应的内容
// 4. 使用函数名称作为组件标签名称，可以成对出现也可以自闭合
function Hello () {
   
  return <div>我是函数组件创建的组件</div>
}

// 创建类组件
// 1. 类名称也必须以大写字母开头
// 2. 类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性
// 3. 类组件必须提供 render 方法render 方法必须有返回值，表示该组件的 UI 结构
class HelloComponent extends React.Component {
   
  render () {
   
    return <div>我是类组件创建的组件</div>
  }
}

function App () {
   
  return <div className="App">
    {
   /* 渲染函数组件 */}
    <Hello></Hello>
    {
   /* 渲染类组件创建的 */}
    <HelloComponent></HelloComponent>
  </div>
}

export default App

06 事件绑定

import React from "react"
function Hello () {
   
  // 事件绑定
  // 绑定函数组件的点击事件
  const clickHandler = () => {
    console.log('函数组件的点击事件被触发了') }
  return <div onClick={
   clickHandler}>我是函数组件创建的组件</div>
}

class HelloComponent extends React.Component {
   
  // 绑定类组件的点击事件
  // 事件回调函数标准写法,避免this指向问题
  // 这样写,回调函数中的this指向的是当前组件实例对象
  clickHandler2 = () => {
    console.log('类组件的点击事件被触发了') }
  render () {
   
    return <div onClick={
   this.clickHandler2}>我是类组件创建的组件</div>
  }
}

function App () {
   
  return <div className="App">
    {
   /* 渲染函数组件 */}
    <Hello></Hello>
    {
   /* 渲染类组件创建的 */}
    <HelloComponent></HelloComponent>
  </div>
}

export default App

07 事件对象e

import React from "react"
function Hello () {
   
  const clickHandler = (e) => {
   
    console.log('函数组件的点击事件被触发了', e)
    // 阻止a链接跳转
    e.preventDefault()
  }
  return <div onClick={
   clickHandler}><a href="http://baidu.com">点击跳转百度</a></div>
}

class HelloComponent extends React.Component {
   
  clickHandler2 = (e) => {
    console.log('类组件的点击事件被触发了', e) }
  render () {
   
    return <div onClick={
   this.clickHandler2}>我是类组件创建的组件</div>
  }
}

function App () {
   
  return <div className="App">
    {
   /* 渲染函数组件 */}
    <Hello></Hello>
    {
   /* 渲染类组件创建的 */}
    <HelloComponent></HelloComponent>
  </div>
}

export default App

08 传递额外参数

import React from "react"
function Hello () {
   
  // 传递额外参数
  // 当需要有参数传入并且也需要事件对象时,传参时需要把箭头函数的事件对象传入函数,只需要这样一个额外参数

  // 只需要一个额外参数  () => onDel(item.id)
  // 既需要事件对象也需要额外参数  (e) => onDel(e,item.id)
  const clickHandler = (msg, e) => {
    console.log('函数组件的点击事件被触发了', msg, e) }
  // 传参时候需要使用箭头函数
  return <div onClick={
   (e) => clickHandler("this is msg", e)}>我是函数组件创建的组件</div>
}

class HelloComponent extends React.Component {
   
  clickHandler2 = () => {
    console.log('类组件的点击事件被触发了') }
  render () {
   
    return <div onClick={
   this.clickHandler2}>我是类组件创建的组件</div>
  }
}

function App () {
   
  return <div className="App">
    {
   /* 渲染函数组件 */}
    <Hello></Hello>
    {
   /* 渲染类组件创建的 */}
    <HelloComponent></HelloComponent>
  </div>
}

export default App

09 组件状态修改

// 组件状态  类组件进行演示
import React from "react"
class TextComponent extends React.Component {
   
  // 定义组件状态
  state = {
   
    // 这里定义各种属性  全都是当前组件状态
    name: "cp teacher",
    count: 0
  };
  changeName = () => {
   
    // 修改state中的状态name
    // 注意:不可以直接做复制修改,必须通过一个方法 setState
    this.setState({
    name: "萧寂" })
  };
  changeCount = () => {
   
    // 让count的值加1
    this.setState({
    count: this.state.count + 1 })
  };
  render () {
   
    return (<div>
      {
   /* 渲染name */}
      当前name为:{
   this.state.name}
      {
   /* 修改name状态 */}
      <button onClick={
   this.changeName}>修改name状态</button>
      <button onClick={
   this.changeCount}>修改count++,当前为{
   this.count}</button>
    </div>)
  }
}
function App () {
   
  return <div className="App">
    <TextComponent></TextComponent