React常用方法汇总【更新中】

文章目录

前言
创建项目
启动命令
列表渲染
父子组件传值
[useEffect 异步函数使用方法](#useEffect 异步函数使用方法)
[useEffect 异步函数清除方法](#useEffect 异步函数清除方法)
控制组件显示隐藏
[axios 安装使用](#axios 安装使用)

前言

运行 react 需要先安装 node.js，具体安装步骤可以参考这篇文章 https://blog.csdn.net/weixin_43721000/article/details/134284418

创建项目

shell 复制代码

npx create-react-app <项目名称>
# npx create-react-app my-app

启动命令

先 cd 到项目目录下

shell 复制代码

npm start

列表渲染

javascript 复制代码

import React, { useState } from "react"

function App() {
  const [artList, setArtList] = useState([
    {'id': 1, 'title': '百年孤独', 'author': '马尔克斯'},
    {'id': 2, 'title': '老人与海', 'author': '海明威'}
  ])

  return (
    <div>
      {artList.map(item =><li key={item.id}>《{item.title}》{item.author}</li>)}
    </div>
  );
}

export default App;

父子组件传值

父传子

javascript 复制代码

import React from "react"

// 子组件
function SonElm(props) {

  return (
    <div style={{background: "#888", padding: "10px", width: "200px"}}>
      子组件: {props.msg}
    </div>
  )

}

// 父组件
function FatherElm() {
  const msg = '父组件传递的消息'
  
  return (
    <div style={{background: "#aaa", padding: "10px", width: "240px"}}>
      父组件
      <SonElm msg={msg}/>   
    </div>
  )
}


function App() {
  return (
    <React.Fragment>
      <FatherElm/>
    </React.Fragment>
  );
}

export default App;

子传父

useEffect 异步函数使用方法

useEffect 是异步函数，有三种不同的执行方式：

监听到页面发生变动就执行此方法

javascript 复制代码

useEffect(() => {
	console.log('页面发生变动就执行此方法')
})

立即执行，且仅执行一次

javascript 复制代码

useEffect(() => {
	console.log('仅执行一次')
}, [])

监听到某个变量产生变化时就执行

javascript 复制代码

const [count, setCount] = useCount(233)
useEffect(() => {
	console.log('count值发生变化时执行')
}, [count])

useEffect 异步函数清除方法

useEffect 函数执行后，可以通过以下几种情况终止执行

当前组件销毁时终止执行

javascript 复制代码

useEffect(() => {
	// 执行逻辑
	const timer = setInerval(() => {
		console.log('定时器执行中')
	}, 1000) 

	// 此方法会在 useEffect 所在组件被销毁时执行
	return () => {
		// 清除逻辑
		clearInterval(timer)
	}
	
}, [])

todo

控制组件显示隐藏

javascript 复制代码

import React, { useState } from "react"

// 显示隐藏的组件
function UserInfoElm() {
  return (
    <div>
      <p>姓名：小王</p>
      <p>手机号：138xxxxxxxx</p>
      <p>性别：女</p>
    </div>
  )
}

// 控制显示隐藏的方法
function App() {
  const [isShow, setIsShow] = useState(true)
  const toggleSwitch = () => setIsShow(!isShow)
  return (
    <div>
      {isShow && <UserInfoElm/>}
      <button onClick={toggleSwitch}>点击 显示/隐藏 用户信息</button>
    </div>
  );
}

export default App;

axios 安装使用

安装方法
cpp 复制代码
```
npm install axios
```

使用方法

后端返回数据结构

json 复制代码

{
	"code": 1,
	"msg": "好耶",
	"data": [{
		"id": 1,
		"title": "百年孤独",
		"author": "马尔克斯"
	}, {
		"id": 2,
		"title": "老人与海",
		"author": "海明威"
	}]
}

前端调用代码

javascript 复制代码

import axios from "axios";
import React, { useEffect, useState } from "react"

function App() {
  const [artList, setArtList] = useState([])

  // 异步执行，立即执行，仅执行一次
  useEffect(() => {
    // 定义请求数据的方法
    async function getArtList() {
      const res = await axios.get('http://127.0.0.1:11237/get_art_list')
      setArtList(res.data.data)  // axios 返回的数据会额外封装一层 data
    }
    // 调用
    getArtList()
  }, [])
  
  // 列表渲染
  return (
    <div>
      {artList.map(item =><li key={item.id}>《{item.title}》{item.author}</li>)}
    </div>
  );
}

export default App;