Open gaowei1012 opened 3 years ago
开始一个新的项目
hooks 写法
import React, {useState, useEffect, useRef} from 'react'
const App = (props) => {
/// 创建state初始化
const [current, setCurrent] = useState(0)
// 获取DOM实例,真实的DOM节点
const ref = useRef(null)
// 页面加载时执行
// 类似于 componentDidMount() {}
useEffect(() => {
console.log('init=====>>>', )
}, [])
useEffect(() => {
console.log('ref=====>>>', ref)
}, [ref])
/// 处理添加事件
const add_current=()=> {
setCurrent(current+1)
}
return (
<div>
<span>{current}</span>
<br/>
<div ref={ref}></div>
<div onClick={add_current}>按钮</div>
</div>
)
}
export default App
class 类写法
import React from 'react';
class AppClass extends React.Component {
// eslint-disable-next-line no-useless-constructor
constructor(props) {
super(props)
this.state={
current: 0, // 初始化状态
}
}
componentDidMount() {
// 初始化加载执行
console.log('init =====>>>', )
}
// 事件
add_current = () => {
this.setState({
current: this.state.current + 1
})
}
render() {
const {current} = this.state
return (
<div>
<span>{current}</span>
<br/>
<div onClick={this.add_current}>按钮</div>
</div>
)
}
}
export default AppClass;
初始化state - useState
// 定义bool
const [show, setShow] = useState(false)
// 定义对象
const [obj, setObj] = useState({})
// 定义number
const [current, setCurrent] = useState(0)
// 定义数组
const [arr, setArr] = useState([])
useEffect
// useEffect 等同于 class中的 componentDidMount() {}
// useEffect 接收第二个参数,用于监听某个参数变化时,做监听的作用
useEffect(() => {
// 进入时执行,这里执行的时候真实的DOM已经初始化
}, [])
useEffect(() => {
// 当str变化是,这里面的逻辑会触发
// 用于监听赋值
}, [str])
React 使用 react-router-dom
import React from "react";
import { HashRouter as Router, Route, Switch } from "react-router-dom";
import Home from "./home";
import UserCenter from "./UserCenter";
// Router包裹一个组件,生成一个路由实例
// Switch 切换路由
// Route 每一个路由
const MyRouter = () => {
return (
<Router>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/usercenter" component={UserCenter} />
</Switch>
</Router>
);
};
export default MyRouter;
然后在根组件引入
import MyRouter from './router'
/// ... 省略非关键代码
<MyRouter />
/// ... 省略非关键代码
A 页面跳转 B 页面
// 跳转到 usercenter 页面
const go_path = () => {
props.history.push('/usercenter')
}
// 渲染JSX
return (
<button type='button' onClick={go_path}>跳转到usercenter</button>
)
B 页面返回 A 页面
// 返回上一级页面
const go_back = () => {
props.history.go(-1)
}
// 渲染JSX
return (
<button type='button' onClick={go_back}>回到home页面</button>
)
// Father.js 父组件传值给子组件
import React from 'react'
import Child from './Child'
const Father = (props) => {
return (
<div>
<span>
我是父组件
</span>
<Child name={'我是传给子组件的值 - 小龚'}/>
</div>
)
}
export default Father
// Child.js 子组件接收父组件传过来的值
import React from 'react'
const Child = (props) => {
return (
<div>
{props.name}
</div>
)
}
export default Child
// 子组件传值给父组件 // Child.js
import React from 'react'
const Child = (props) => {
const {filter} = props
// 返回值给父组件
const child_click = () => {
filter(['1', '2', '3'])
}
return (
<div>
{props.name}
<button type='button' onClick={child_click}>传给父组件</button>
</div>
)
}
export default Child
// Father.js
import React from 'react'
import Child from './Child'
const Father = (props) => {
const filter=(args)=>{
console.log('接收子组件传过来的值=====>>>', args)
}
return (
<div>
<span>
我是父组件
</span>
<Child filter={filter} name={'我是传给子组件的值 - 小龚'}/>
</div>
)
}
export default Father
// 获取数据
import React from 'react'
import axios from 'axios'
const Address = (props) => {
// 页面加载时候获取数据
React.useEffect(() => {
axios.get('http://127.0.0.1:7082/api/v0.0.1/auth/data/recommend/getAllRecommend')
.then(res => {
console.log('res=====>>>', res)
})
.catch(err => {
console.log('err=====>>>', err)
})
}, [])
return (
<div>address</div>
)
}
export default Address
安装&创建项目
npx create-react-app my_app