创建项目：
创建react项目：
npx create-react-app demo-app //demo-app为项目名称
运行项目：
npm start
其他（安装npx命令）：
npm install -g npx
初步工作：
1.删除src下的其他文件，只留下app.jsx,app.css,index.js,index.css。
2.app.jsx相当于vue的app.vue，index.js相当于vue的main.js。
3.新建文件的时候尽量以vue目录的结构为标准，组件就放在components目录，页面放在views目录，redux放在store目录，路由放在router目录。
4.定义组件的名字首字母大写，组件后缀.jsx。
快速生成代码：
安装插件：
ES7 React/Redux/GraphQL/React-Native snippets
新建文件后，输入rafc或rafce可以快速生成react模板代码(用户片段)。
相关知识：
1.react官方已经推荐使用函数式组件，可以暂时不学习类组件；目前所有的新项目都是采用全部函数式组件实现，只有一个老项目需要迭代更新的才使用的是类组件。
react的注意事项：
1.不要在jsx语法中使用 if - else,可以使用三目运算、或运算、与运算;jsx语法只支持表达式，不支持js语句。
2.不要在jsx语法中使用 for 循环, 使用 map 循环;
3.添加状态必须在构造方法，添加构造方法必须执行super();
4.组件必须导入React;
常用hooks函数（记一下最好）：
useState:状态钩子。声明响应式数据
useEffect：副作用钩子。生命周期，相当于vue的mounted。
useReducer：Action 钩子。状态管理钩子useRef
useLocation：接收页面跳转的参数。
useHistory：跳转页面，并可以传递参数。(页面跳转推荐这种方式)
一、基本方法。
基本知识：
1.react每一个组件都是一个函数。
2.jsx语法：在js当中嵌套html，如果要写html代码，必须return(html)，必须有一个跟节点<div>嵌套，可以写成<></>。
基础语法：
1.定义数据：在react引入useState，useState是一个函数，里面传入初始化的数据，返回一个数组，数组的第一项是数据本身，第二项是改变数据的方法，显示数据用：{数据名}。
2.绑定事件：都是on开头。
App.css：
.app-active{
color:red;
}
.app-box{
height:20px;
border:1px solid red;
margin-bottom:20px;
}app.jsx：
import React,{useState,useEffect,useRef} from 'react'//使用jsx语法，必须引入React。
import './App.css'
const App=()=>{
let [name,setName]=useState('jack')//创建数据，name为变量，setName修改这个变量的方法，jack为初始化这个变量的值。useState定义的方式代表声明响应式数据。
let [age,setAge]=useState(10)
let [activeIndex,setActiveIndex]=useState(-1)
let [arr,setArr]=useState([
{name:'香蕉'},{name:'橘子'}
])
let update=()=>{
setName('tom')
setAge(20)
}
//点击事件调用的方法，并接收传递过来的参数
let clickItem=(item,index)=>{
setActiveIndex(index)
console.log(item,index)
}
//等于vue的mounted
useEffect(()=>{
//发请求
//数据初始化
console.log('effect');
//组件销毁，如果不做操作可以不写
return ()=>{
//清除定时器
}
},[])
return (
<div>
<div>{name}---{age}</div>{/*{name}：渲染数据*/}
<div>
<button onClick={update}>更新数据</button>{/*onClick={update}：绑定事件的方法。*/}
</div>
<div style={{height:'20px',padding:'10px 20px'}}>样式</div>
{/*不带单位默认px，多个样式要用引号*/}
{
arr.map((item,index)=>{
return (
<div key={index} onclick={()=>clickItem(item,index)} className={`app-box ${activeIndex === index?'app-active':''}`}>
{/*return中不能写if，只能写三目表达式，其他语法也不行。可以在return上面进行if，return不同的结果。*/}
{/*传参数只能通过()=>clickItem(item,index)箭头函数的形式。*/}
{item.name}
</div>
)
})
}
</div>
)
}
export default App二、组件传参数，获取dom元素，获取子组件实例。
以下省略了部分代码：
app.jsx:
import React,{useState,useEffect,useRef,useRef} from 'react'
let dv=useRef(null);
let child=useRef(null);
let send=(val)=>{
console.log('子组件传过来的数据:',val);
console.log('获取的dom:',dv.current);
console.log('获取子组件的所有节点：',child.current);//跟上一个一模一样。无法调用子组件的方法。
}
return (
<>
<Child ref={child} name={name} send={send}></Child>
<div ref={dv}>123</div>
</>
)
child.jsx:
import React,{useState,forwardRef} from 'react'
const Child=(props,ref)=>{
let [msg]=useState('子组件的数据');
let send=()=>{
props.send(msg);//调用父组件传递过来的方法，并将值传过去。也就是回调函数的形式。
}
return (
<div ref={ref}>
<div>父组件传递过来的数据：{props.name}</div>
<div>
<button onClick={send}>传值给父组件</button>
</div>
</div>
)
}
export default forwardRef(Child);
三、路由守卫。
安装路由守卫插件：
npm i -S react-router-dom
新建目录文件src下：router/index.js。//与vue相似。router/index.js:
//配置路由
import Home from '../views/home/home'//最好用'@/views/home/home
import Login from '../views/login/login'
import NotFound from '../views/404/404'
//有权限
export const authRoutes=[
{
path:'/',
component:Home,
exact:true,//是否精准匹配，为false就会把所有的匹配了。
meta:{
title:'首页'
}
}
]
//没权限
export const commomRoutes=[
{
path:'/login',
component:Login,
exact:true,//是否精准匹配，为false就会把所有的匹配了。
meta:{
title:'登录'
}
},
{
path:'/404',
component:NotFound,
exact:true,//是否精准匹配，为false就会把所有的匹配了。
meta:{
title:'404'
}
}
]
//export default：导出一个，export：导出多个。app.jsx：
import {BrowserRouter,Switch,Router,Redirect} from 'react-router-dom'
const App=()=>{
return (
<BrowserRouter>
<Switch>
{
//没权限放前面
commonRoutes.map(item=>{
return(
<Route key={item.path} path={item.path}
component={item.component exact={item.exact} //不干任何事情，不能跟render同时出现。
render={(props)=>{ //需要做其他事情,比如设置标题，不能跟上面的component偶同事出现
document.title=item.meta.title;
return (
<item.component {...props}/> //单双标签都可以
)
}}
/>
);
})
}
{
//有权限
authRoutes.map(item=>{
return(
<Route key={item.path} path={item.path}
component={item.component exact={item.exact} //不干任何事情，不能跟render同时出现。
render={(props)=>{ //需要做其他事情,比如设置标题，不能跟上面的component偶同事出现
document.title=item.meta.title;
//路由守卫，判断是否登录
if(!localStorage.getItem('token')){
return (
<Redirect to='/login' />
)
}
return (
<item.component {...props} /> //单双标签都可以
)
}}
/>
);
})
}
<Redirect to='/404' />
</Switch>
</BrowserRouter>
)
}
login.jsx: //跳转路由的方法
import React from 'react'
import { useHistory } from 'react-router-dom'
const Login=(props)=>{
let history=useHistory();
let login=()=>{
//跳转路由方式一props。很老旧
props.history.push('/');
//调试方式二。hook函数的方式。最新版本有可能会报错。
history.push('/'); //不传参数，'/'是home页面
history.push('/',{name:'jack'}); //跳转路由传参数
}
return (
<div>
<button onClick={login}>登录</button>
</div>
)
}
export default LoginHome.jsx，Login.jsx，NotFound.jsx对应着主页，登录页和404页面，里面的内容我就不写了。
说明：
1.props跳路由的方式只有路由组件可以使用，首先要用<item.component {...props} />传递路由信息，然后调用当中的props.history.push跳转路由。
2.没有注册的子组件是不能使用props.history.push这种方式跳转路由的，因为他获取不到路由的信息。
home.jsx: //接收路由跳转参数
import React from 'react'
import { useLocation } from 'react-router-dom'
const Home=(props)=>{
let location=useLocation();
console.log('传递的参数:',location)
return (
<div>Home
</div>
)
}
export default Home;四、公共路由和redux状态管理。
安装redux状态管理：
npm i -S redux react-redux redux-thunk
src/index.js:
import store from '@/store'
import {Provider} from 'react-redux'
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)store/index.js:
import {createStore,combineReducers} from 'redux' //combineReducers等同于vue的mutation
import thunk from 'redux-thunk' //发请求
import user from './reducers/user/user' //引入模块
const store=createStore(combineReducers({
user //多个模块以空格隔开
}),applyMiddleware(thunk));
export default storestore/reducers/user.js: //相当于mutation
let initState={
menus:[],
users:[]
}
//active是一个 对象，一个是type，一个是data。
export default function userReducer(state=initState,action){
switch(action.type){
case 'login':
return {
...state,
}
case 'getMenus':
return {
...state,
menus:action.data
}
case 'getUsers':
return {
...state,
users:action.data
}
default:
return {
...state
}
}
}src/http/index.js: //封装请求
安装axios：
npm i axios -S
import axios from 'axios'
const http=axios.create({
timeout:10000,
baseURL:'/api'
})
http.interceptors.request.use(config=>{
let token=localStorage.getItem('token');
if(token){
config.headers.auth=token;
}
return config;
});
http.interceptors.response.use(res=>{
return res.data;
});
export default http;
src/http/api.js: //封装请求
import api from './api.js'
export default {
login({username,password}){
return http.post('/login',{username,password});
},
getMenu(){
return http.post('/getMenu',);
}
}store/actions/user/index: //相当于vue的action
import api from '@/http/api.js'
//导出多个方法
export function login(params){
//发请求
return async (dispatch)=>{
let res=await api.login(params);
if(res.meta.status===200){
localStorage.setItem('token',res.data.token);
localStorage.setItem('user',JSON.stringify(res.data));
window.location.pathname='/' //跳路由的方式，其他不行。
//提交reducers。等同于调用vue的mutation方法修改state的值。
dispatch({
type:'login'
})
}
}
}
export function getMenus(params){
//发请求
return async (dispatch)=>{
let res=await api.getMenus(params);
if(res.meta.status===200){
//提交reducers。等同于调用vue的mutation方法修改state的值。
dispatch({
type:'login',
data:res.data
})
}
}
}login.jsx: //如何提交reducers(mutation)
import {login} from '@/store/actions/user/user'
imort {useDispatch} from 'react-redux'
const Login=(props)=>{
let dispatch=useDispatch()
let loginBtn=(val)=>{
//调用action中的方法
dispatch(login({
username:val.username,
password:val,password
}));
console.log('点击登录获取到的账号密码：',val)
}
//省略部分代码
}后端请求的代理配置(相当于vue的vue.config.js)：
安装http-proxy-middleware：
$ npm install --save-dev http-proxy-middleware
src/setupProxy.js: //跟vue的路径结构是存在区别的，注意哈
const {createProxyMiddleware} = require('http-proxy-middleware')
module.exports=function(app){
app.use(createProxyMiddleware('/api',{
ws:false,
target:'http://192.177.2.99/api/private/v1/',
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}))
}最后
以上就是要减肥牛排最近收集整理的关于react 快速学习所有知识或复习笔记一、基本方法。二、组件传参数，获取dom元素，获取子组件实例。三、路由守卫。四、公共路由和redux状态管理。的全部内容，更多相关react内容请搜索靠谱客的其他文章。
发表评论 取消回复