-
yarn
yarn 安装环境
yarn start 启动
yarn build 构建
yarn add xxx 安装某插件yarn eject 暴露出所有webpack相关的文件(默认是隐藏的)此执行后不可撤销
-
创建项目并启动
**create-react-app 是react 提供的用于创建react项目的脚手架库 **
全局安装: npm install -g create-react-app 或者 npx create-react-app my-app
切换到想创建项目的目录 create-react-app name
进入项目文件夹 cd name
启动项目 npm start-
熟悉项目
node_modules 依赖存放位置public存储静态资源文件(页面 图片 样式)
网站图标文件要用.ico文件
index.html 主页面 用户承装组件的主页面 页面永远有一个
SPA应用 sing page application 单页面应用
%PUBLIC_URL%指的是public这个路径 组件路由时这个优势会体现出来
-
src:
app.js 是创建了个组件叫app
app.css
vscode可以去下载 jsx 插件,然后创建的文件以 jsx 后缀,在里面写 react 语法会有提示
css模块化
初始代码片段 安装插件 搜索react查ES7 React/Redux*******
class输入rcc
函数输入rfc
useEffect 监听dom 执行 DOM 更新之后调用它
useEffect 副作用,与函数业务主逻辑关系不大
componentDidMount() 第一次组件已经被渲染后
componentDidUpdate 每次组件更新的时候
组件从 DOM 中被移除,React 就会调用 componentWillUnmount() 生命周期方法
Hooks 16.8以上版本
路由:
安装路由yarn add react-router-dom或者 npm install --save react-router-dom
组件中引入路由
// 引入路由
import { BrowserRouter as Router,Route,Link } from 'react-router-dom';
useContext 解决父子组件传参 变量共享
useReducer 状态共享相当于redux
// 父子组件传参 createContext 创建上下文 useContext 接收上下文
import React,{ useState ,createContext , useContext} from 'react';
// 组件
function Index(){
let countA = useContext(CountContent)
return <h2>子组件接收到了来自父组件的 {countA}</h2>
}
// 创建了一个共享的组件
const CountContent = createContext();
// 父组件
function Exm02() {
let [ count , setCount ] = useState(0)
return (
<div>
<p>{count}</p>
<button onClick={()=>{setCount(++count )}}>戳我</button>
<CountContent.Provider value={count}>
<Index/>
</CountContent.Provider>
</div>
)
}
export default Exm02;
useReducer
Reducer 起源于Redux ,但是与Redux没什么关系
useReducer 和useContext 结合实现 Redux 效果 ,可以代替比较复杂的Redux
useContext 设置访问全局状态 符合了Redux 规则:状态全局化并能统一管理
useReducer 传递参数,更新复杂逻辑状态 实现Redux 中的Reducer 这个部分,控制业务逻辑
useMemo 解决子组件重复执行的问题 类似于监听
// name发生状态变化时发生
const actionXiaof = useMemo(()=>changeXiaoF(name),[name])
useMemo是同步的,useEffect是异步的
自定义hooks函数