基础

在下系渣渣辉
45 阅读3分钟

做为学习笔记分享，欢迎评论交流，如有不正的地方请各位大佬指正。

新建项目

npx create-react-app my-react
进入目录，执行npm start

组件导入

文件：index.js
核心模块
import React from "react";
import ReactDOM from "react-dom/client";
基本样式
import "./index.css";
组件导入
import App from "./App";
id为root的div标签在public目录中
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    组件使用
    <App />
);

jsx使用

文件：App.js
function App() {
    return (
        <div className="App">
            <p>我是组件</p>
        </div>
    );
}
默认导出
export default App;

useState使用和双向绑定

import { useState } from 'react';
function App() {
    msg：自定义变量，更新变量的方法(新值替换久值)
    let [msg, setMsg] = useState('message')
    return (
        <div className="App">
            <input value={msg} onInput={(e) => setMsg(e.target.value)} />
        </div>
    );
}
export default App;

点击事件及事件传参

import { useState } from 'react';
function App() {
    msg：自定义变量，更新变量的方法(新值替换久值)
    let [msg, setMsg] = useState('message')
    const getChange = (value) => {
        更新变量的方法(新值替换久值)
        setMsg(value)
    }
    return (
        <div className="App">
            展示msg
            <p>{ msg }</p>
            不带参数点击事件
            <button onClick={getChange}>change</button>
            带参数点击事件
            <button onClick={() => getChange('hello')}>change</button>
        </div>
    );
}
export default App;

useEffect使用

官方解释：useEffect 是一个 React 钩子，可以让你 将组件与外部系统同步。
useEffect(setup, dependencies?)
setup：具有副作用逻辑的函数。你的设置函数也可以选择返回一个清理函数。当你的组件被添加到 DOM 时，React 将运行你的设置函数。在每次使用更改的依赖重新渲染后，React 将首先使用旧值运行清理函数（如果你提供了它），然后使用新值运行你的设置函数。在你的组件从 DOM 中移除后，React 将运行你的清理函数。
可选 dependencies：setup 代码中引用的所有反应值的列表。反应值包括属性、状态以及直接在组件主体内声明的所有变量和函数。如果你的 linter 是 为 React 配置，它将验证每个反应值是否正确指定为依赖。依赖列表必须具有恒定数量的条目，并且像 [dep1, dep2, dep3] 一样写成内联。React 将使用 Object.is 比较将每个依赖与其先前的值进行比较。如果省略此参数，你的副作用将在每次重新渲染组件后重新运行。查看传递依赖数组、空数组和完全不依赖之间的区别。
import { useState, useEffect } from 'react';
function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
  useEffect(() => {
    const connection = axios(serverUrl);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [roomId]);
}
dependencies：
没有的时候，在组件初始渲染和组件更新时执行
为空数组的时候：在组件初始渲染时执行一次
为特定参数时时候，在组件初始渲染和特定参数更新时执行，例如上例[roomId]，roomId更新时会执行

Dom绑定

// inputRef.current 即时获取的Dom
import { useRef } from 'react';
const Demo = () => {
    let inputRef = useRef(null)
    const sendClick = () => {
        console.log(inputRef.current);
    }
    return (
        <div className='b'>
            <input type='text' ref={inputRef} />
            <button onClick={sendClick}>send</button>
        </div>
    )
}
export default Demo;

mock模拟接口请求 json-server

npm install json-server -D
package.json
"serve": "json-server db.json --port 3004"
在根目录下创建文件夹和json文件：mock/data.json
执行npm run serve（和npm run start 不冲突）
http://localhost:3004/list （模拟后端接口）
avatar
文章
阅读
粉丝