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. 子传父

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;