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

---

前言

运行 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;

---

父子组件传值

1. 父传子

   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;
   

2. 子传父
   todo

---

useEffect 异步函数使用方法

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

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

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

2. 立即执行，且仅执行一次

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

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

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

---

useEffect 异步函数清除方法

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

1. 当前组件销毁时终止执行

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

2. 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
  

• 使用方法
  1. 后端返回数据结构

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

  2. 前端调用代码

     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;

  

---