快速开始React项目

[gaowei1012]

安装&创建项目

npx create-react-app my_app

[gaowei1012]

开始一个新的项目

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

[gaowei1012]

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;

[gaowei1012]

• state 一个页面中的所有状态
• props 用于组件通讯，传递状态

[gaowei1012]

初始化state - useState

// 定义bool
const [show, setShow] = useState(false)

// 定义对象
const [obj, setObj] = useState({})

// 定义number
const [current, setCurrent] = useState(0)

// 定义数组
const [arr, setArr] = useState([])

[gaowei1012]

useEffect

// useEffect 等同于 class中的 componentDidMount() {}
// useEffect 接收第二个参数，用于监听某个参数变化时，做监听的作用

useEffect(() => {
  // 进入时执行，这里执行的时候真实的DOM已经初始化
}, [])

useEffect(() => {
// 当str变化是，这里面的逻辑会触发
// 用于监听赋值
}, [str])

[gaowei1012]

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;

[gaowei1012]

然后在根组件引入

import MyRouter from './router'

/// ... 省略非关键代码
 <MyRouter />
/// ... 省略非关键代码

[gaowei1012]

A 页面跳转 B 页面

// 跳转到 usercenter 页面
  const go_path = () => {
    props.history.push('/usercenter')
  }

// 渲染JSX
return (
   <button type='button' onClick={go_path}>跳转到usercenter</button>
)

[gaowei1012]

B 页面返回 A 页面

// 返回上一级页面
  const go_back = () => {
    props.history.go(-1)
  }

// 渲染JSX
return (
  <button type='button' onClick={go_back}>回到home页面</button>
)

[gaowei1012]

// 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

[gaowei1012]

// 子组件传值给父组件 // 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

[gaowei1012]

// 获取数据

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