火腿肠的博客

前些日子看了B站一个UP主的视频，将reactHooks区分为自变量和因变量并说明其中的联系，感触很深，自己打算也来总结一下hoos以及hooks的原理，下面是使用篇关系useStateuseState是自变量，也就是说可以通过它自己的改变来影响其他的因变量从useState里取出这两个变量一个用于存放值，另外一个用于设置前者的内容默认值为useState内填写的内容用法：import React, { useState } from 'react';function Example()

react更改页面头部1. 安装hel-met2. 对应位置新增配置： <div> <Helmet> <title> 项目列表 </title> </Helmet> <SearchPanel users={users} param={param} setParam={setParam} /> <List lo

普通设置错误定义错误变量： const [isLoading, setIsLoading] = useState(false); const [error,setError] = useState<null | Error>(null);在函数中使用： useEffect(() => { setIsLoading(true); client("projects", { data: clearnObject(debounceParam),

craco安装用于更改默认配置npm i @craco/craco craco-less根目录新增：craco.config.jsconst CracoLessPlugin = require("craco-less");module.exports = { plugins: [ { plugin: CracoLessPlugin, options: { lessLoaderOptions: { lessOptions:

强弱类型的继承关系如果A类型继承了B继承那么如果要求类型A但是使用的是类型B那么也不会报错js为鸭子类型：面向接口编程而不是面向对象编程（只校验格式）所以说即使不是一个类型只要样子一样就不会报错...

TS我认为的定义ts就是一个用于代码检查的工具，以避免在浏览器中运行后才出现错误，并且并不是很容易进行追踪在代码顶部设置说明interface SearchPanelProps{ users:User[], param:{ name:string; personId:string; }, setParam:(param:SearchPanelProps['param'])=>void;}在函数中应用适当的类型说明export const SearchPan

React数据获取与渲染

文件目录分析配置根目录位置Prettier安装后需要在跟目录创建.gitignore.prettierrc.json两个文件，用于配置Prettier由于eslint与其冲突 所以需要更改package.json配置：下载插件：npm i eslint-config-prettier "eslintConfig": { "extends": [ "react-app", "react-app/jest", "prettier"

ProTypes+DefaultProps1.引入：import PropTypes from 'prop-types'2.校验：TodoItem.propTypes = { text:PropTypes.string.isRequired, content:PropTypes.arrayOf(PropTypes.string,PropTypes.number), ItemDelete:PropTypes.func, index:PropTypes.number,

组件// 函数写法function App() { return ( <div className="App"> hello World </div> );}export default App;// 类写法import React from 'react';class App extends React.Component { render() { return ( <div className

安装：npm install -g create-react-app创建项目：create-react-app 【项目名称】执行 cd todolist npm start