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

文章目录

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

前言

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

创建项目

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

启动命令

先 cd 到项目目录下

npm start

列表渲染

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;

在这里插入图片描述

父子组件传值

父传子

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;

在这里插入图片描述

子传父
todo

useEffect 异步函数使用方法

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

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

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

立即执行，且仅执行一次

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

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

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

useEffect 异步函数清除方法

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

当前组件销毁时终止执行

useEffect(() => {// 执行逻辑const timer = setInerval(() => {console.log('定时器执行中')}, 1000) // 此方法会在 useEffect 所在组件被销毁时执行return () => {// 清除逻辑clearInterval(timer)}}, [])

todo

控制组件显示隐藏

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 安装使用

安装方法
```
npm install axios
```

使用方法

后端返回数据结构

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

前端调用代码

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;