react教程

yzhSWJ

已于 2024-04-06 23:12:52 修改

阅读量332

点赞数

文章标签： react.js 前端前端框架

于 2023-07-20 17:26:14 首次发布

本文链接：https://blog.csdn.net/yuzheh521/article/details/131835844

版权

antD demo

import React from 'react';
import logo from './logo.svg';
import { Button, Space } from 'antd';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <BB></BB>
      </header>
    </div>
  );
}

const BB: React.FC = () => {
  alert('hello')
  var nu: string[]
  nu = ['张三', '李斯', '许三多']
  return (
    <Space wrap>
      {
        nu.map((valeu) => {
          return (
            <>
              <Button type="primary">{valeu}</Button>
              <Button type="primary">{valeu}</Button>
            </>
          )
        })
      }
    </Space>
  )
};

export default App;

recat 中对与数组，对象的操作尽量不要对原数据直接添加，最好生成新的对象数组，避免不要要的bug，页面不重新渲染

aap.js


import * as React from "react";
import { Routes, Route, Link} from "react-router-dom";
import AppForm from './views/from';
import './App.css';
function App() {
  return (
    <div className="App">
      <h1>hello!React</h1>
      <AppForm></AppForm>
      <Routes>
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
      </Routes>
    </div>
  );
}

// App.js
function Home() {
  return (
    <>
      <main>
        <h2>home</h2>
      </main>
      <nav>
        <Link to="/about">About</Link>
      </nav>
    </>
  );
}

function About() {
  return (
    <>
      <main>
        <h2>About</h2>
       
      </main>
      <nav>
        <Link to="/">Home</Link>
      </nav>
    </>
  );
}

export default App;

from（函数）组件

import React, { useState, useEffect } from 'react';
import { Button, Space } from 'antd';

const myMethod = (setData,c) => {
  setData({
    a: c
  });
};
const AppForm = React.memo(() => {
  const [data, setData] = useState({ a: '1' });

  useEffect(() => {
    // 加载和调用方法,setData useEffect第一个参数异步此时打印的是1
    myMethod(setData,'wwwwwwwwwww');
    console.log( data.a);
  }, []);

  return (
    <Space wrap>
      <Button type="primary">{data.a}</Button>
      <Button>Default Button</Button>
    </Space>
  );
});

export default AppForm;

state

immer简化不可变对象操作

拷贝出一个新的值，可以直接对拷贝出的值进行操作

状态重置处理问题

props（只读不能修改，可以运算）


import './App.css';

function App() {
  return (
    <div className="App">
      <AppForm name='hello'></AppForm>
    </div>
  );
}


const AppForm = ((props) => {
  console.log(props)
  //此行代码页面会报错
  props.name='不能修改，会报错，所以props是只读'
  return (
    <h1>{props.name}</h1>
  );
});

export default App;

扩展...传值

props 对组建标签进行属性限制 prop-typs

refs

字符串ref（官网已经不推荐）

拿到的是真实dom

回调函数ref

c-当前节点，赋值给当前对象，然后从当前对象取值

注意事项更新组件的时候内联函数会执行2次

将ref的回调函数，定义成class的绑定函数

createRef

react事件处理

通过onXXX属性指定事件chuli函数（注意大小写）
Reacr使用的是自定义（合成）事件，而不是使用的原生DOM事件--为了更好的兼容性
React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）--为了更高效
通过event。target得到发生事件的dom元素对象---不要过度使用ref

受控组件和非受控组件

收集表单数据

现用现取非受控组件

受控组件

高级函数和函数柯里化

高级函数

【】中括号读变量名取值

柯里化

其他写法

生命周期

render

调用时机：初始化渲染，状态更新之后

componentDidMount

组件挂载完毕调用一次

componentWillUnmount()

组件将要卸载调用（卸载前）

旧版

新版生命周期 17

可以用来获取页面更新之前的数据（使用概率极低）

diffing

错位

初始dom和更新后的dom对比， key0 小张变小王，内容发生变化，对比input 发现内容一样，使用旧的，真实dom 的 input 不会重新更新，以此类推会导致数据错位

react脚手架

npx安装创建(官方推荐)

npx：是一种在npm中安装工具，在 npm version >= 5.2.0 开始，自动安装了npx。目的是提升包内提供的命令行工具的使用体验。

npx create-react-app 是固定命令，create-react-app是React脚手架的名称。

npx 命令会帮助我们临时安装create-react-app包，然后初始化项目完成之后会自自动删掉，所以不需要全局安装create-react-app

npx create-react-app my-app
cd my-app
npm start

指定React版本安装

npx create-react-app my-app安装默认都是最新的版本，因为React18与React17的语法有些差别如果想使用React17的版本，需要我们指定版本，执行如下代码进行版本降级：

npm install react@17.x react-dom@17.x --save

注意：npm install 安装库@版本号 --save
17.x 表示的更新范围为>=17.0.0&&< 18.0.0
17.2.x 表示的更新范围为>=17.2.0&&< 17.3.0

降级完成之后，对src下的入口文件index.js进行修改，如下：

import React from 'react'
import ReactDOM from 'react-dom'
 
import App from './App'
// 18
// const root = ReactDOM.createRoot(document.getElementById('root'));
// root.render(
//   <React.StrictMode>
//     <App />
//   </React.StrictMode>
// );
 
// 17
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)