React介绍

• React是一个用于构建Web和原生交互界面的库

快速搭建React项目

• create-react-app是一个快速创建React开发环境的工具，底层由Webpack构建，封装了配置细节，开箱即用
• 执行命令：npx create-react-app name

JSX

• JSX是JavaScript和XML的缩写，表示在JS代码中编写HTML模版结构，它是React编写UI模版的方式

JSX的本质

• JSX并不是标准的JS语法，它是JS语法的扩展，浏览器本身不能识别，需要通过解析工具做解析之后才能在浏览器中运行

优势：

1. HTML的声明式模版写法
2. JS的可编程能力

JSX中使用JS表达式

• 在JSX中可以使用大括号语法{}识别JavaScript中的表达式，比如常见的变量、函数调用、方法调用等等

注意：if语句、Switch语句、变量声明属于语句，不是表达式，不能出现在{}中

JSX中的列表渲染

• 语法：在JSX中可以使用原生JS中的map方法遍历渲染列表

//项目的根组件
const list = [{id:1001,name:"vue"},{id:1002,name:"react"},{id:1003,name:"angular"}
]function App() {return (<div className="App">this is app{/* 渲染列表 */}<ul>{/* key的作用：React框架内部使用 提升更新性能 */}{list.map((item)=><li key={item.id}>{item.name}</li>)}</ul></div>);
}

JSX实现简单条件渲染

• 语法：在React中，可以通过逻辑运算符&&或者三元表达式(?:)实现基础的条件渲染

const isLogin = falsefunction App() {return (<div className="App">{/* 逻辑与 */}{isLogin && <span>this is span  </span>}{/* 三元运算 */}{isLogin ? <span>miraculous</span> : <span>loading...</span>}</div>);
}

JSX实现复杂条件渲染

• 自定义函数+if判断语句

//项目的根组件
const articleType = 3 //0||1||3//根据不同的类型返回不同的JSX模版
const getArticleForm = ()=>{if(articleType === 0){return <div>我是无图模式</div>}else if(articleType === 1){return <div>我是单图模式</div>}else{return <div>我是三图模式</div>}
}function App() {return (<div className="App">{/* 复杂的条件渲染 */}{/* 调用函数来实现 */}{getArticleForm()}</div>);
}

React中的事件绑定

React基础事件绑定

• 语法：on + 事件名称 = {事件处理程序}，整体上遵循驼峰命名法

function App() {//点击按钮后处理函数const handleClick = ()=>{console.log("点上了按钮");}return (<div className="App"><button onClick={handleClick}>click me</button></div>);
}

传递自定义参数

• 事件绑定的位置改造成箭头函数的写法，在执行相关回调函数传递实参

注意：不能直接写函数调用，这里事件绑定需要一个函数引用

function App() {//点击按钮后处理函数const handleClick = (name)=>{console.log("点上了按钮",name);}return (<div className="App"><button onClick={()=>handleClick('miraculous')}>click me</button></div>);
}

同时传递事件对象和自定义参数

• 在事件绑定的位置传递事件实参e和自定义参数，执行函数中声明形参，注意顺序对应

function App() {//点击按钮后处理函数const handleClick = (name,e)=>{console.log("点上了按钮",name,e);}return (<div className="App"><button onClick={(e)=>handleClick('miraculous',e)}>click me</button></div>);
}

React中的组件

• 定义：在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI，渲染组件只需要把组件当成标签渲染即可

//自定义组件
const Button = ()=>{return <button>click me</button>
}function App() {return (<div className="App">{/* 自闭和 */}<Button />{/* 成对标签 */}<Button></Button></div>);
}

useState

• useState是一个React Hook(函数)，它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果
• 本质：和普通js变量不同的是，状态变量一旦发生变化，组件的视图UI也会跟着变化（数据驱动视图）
  const [count,setCount] = useState(0)

1. useState是一个函数，返回值是一个数组
2. 数组的第一个参数是状态变量，第二个参数是Set函数用来修改状态变量
3. useState的参数将作为count的参数值

 //使用useState完成一个计数器
import { useState } from "react";
//useState实现一个计数器
function App() {const [count,setCount] = useState(0)//点击事件回调const handleClick = ()=>{setCount(count+1)}return (<div className="App"><button onClick={handleClick}>{count}</button></div>);
}

修改状态的规则

状态不可变

• 在React中，状态被认为是只读的，我们应该始终替换它而不是修改它，直接修改状态不能引发视图更新

修改对象状态

• 规则：对于对象类型的状态变量，应该始终传给set方法一个全新的对象来进行修改

1. 错误写法：直接修改

const [form,setForm] = useState({name:"yaoyao"})
//修改form中的name
form.name = "miraculous"

2. 正确写法：setForm传入一个全新的对象

const [form,setForm] = useState({name:"yaoyao"})
setForm({...form,name:"miraculous"
})

受控表单绑定

• 使用React组件的状态(useState)控制表单的状态

1. 准备一个React状态值
   const [value,setValue] = useState('')
2. 通过value属性绑定状态，通过onChange属性绑定状态同步的函数
   <input type="text" value={value} onChange={(e)=>{setValue(e.target.value)}}>
   

React中获取DOM元素

• 在React组件中获取/操作DOM元素，需要使用useRef钩子函数，分为两步：

1. 使用useRef创建ref对象，并与JSX绑定
   const inputRef = useRef(null)
<input type="text" ref={inputRef}></input>
2. 在DOM可用时，通过inputRef.current拿到DOM对象
   const showDOM = ()=>{ console.log(inputRef); }

注意：渲染完毕之后，DOM生成之后才能进行使用

组件通信

理解组件通信

• 组件通信就是组件之间的数据传递，根据组件嵌套关系的不同，有不同的通信方法

父传子

实现步骤：

1. 父组件传递数据：在子组件标签上绑定属性
2. 子组件接收数据：子组件通过props参数接收数据

//定义一个子组件
const Son = (props)=>{return <div>this is son {props.content}</div>
}function App() {//向子组件传递的参数const content = "this is father"return (<div className="App"><Son content={content} /></div>);
}

props说明

1. props可传递任意的数据：数字、字符串、布尔值、数组、对象、函数、JSX
2. props是只读对象：子组件只能读取props中的数据，不能直接进行修改，父组件的数据只能由父组件修改

特殊的prop children

• 当我们把内容嵌套在子组件的标签中，父组件会自动在名为children的prop属性中接收该内容

子传父

• 核心思路：在子组件中调用父组件中的函数并传递参数

//定义一个子组件
const Son = ({onGetSonMsg})=>{const msg = "this is son msg"return <div>this is son <button onClick={()=>onGetSonMsg(msg)}>send msg</button></div>
}function App() {const getMsg = (msg)=>{console.log(msg);}return (<div className="App"><Son onGetSonMsg={getMsg}></Son></div>);
}

使用状态提升实现兄弟组件通信

• 实现思路：借助状态提升机制，通过父组件进行兄弟组件之间的数据传递

使用Context机制跨层级组件通信

实现步骤：

1. 使用createContext方法创建一个上下文对象Ctx
2. 在顶层组件(App)中通过Ctx.Provider组件提供数据
3. 在底层组件中通过useContext钩子函数来获取消费数据

//1. 使用createContext创建一个上下文对象
const MsgContext = createContext()
//2. 在顶层组件中通过MsgContext.provider组件提供数据//定义一个子组件
const A = ()=>{return (<div>this is A component<B/></div>)
}
const B = ()=>{const msg = useContext(MsgContext)return (<div>this is B component {msg}</div>)
}function App() {const getMsg = (msg)=>{console.log(msg);}const msg = "this is app msg"return (<div className="App"><MsgContext.Provider value={msg}>this is app<A /></MsgContext.Provider></div>);
} 

useEffect

• useEffect是一个React Hook函数，用于在React组件中创建不是由事件引起而是由渲染本身引起的操作，比如发送AJAX请求等

useEffect依赖项参数说明

• useEffect副作用函数的执行时机存在多种情况，根据传入依赖项的不同，会有不同的执行表现
  

function App() {const [count,setCount] = useState(0)useEffect(()=>{console.log("副组件触发了");})const handleCount = ()=>{setCount(count+1)}return (<div className="App">this is app<button onClick={handleCount}>count:{count}</button></div>);
}

useEffect — 清除副作用

• 在useEffect中编写的由渲染本身引起的对接组件外部的操作，也经常把它叫作副作用操作
  说明：清楚副作用的函数最常见的执行时机是在组件卸载时自动执行

const Son = ()=>{//渲染时开启一个定时器useEffect(()=>{const time = setInterval(() => {console.log("定时器开始");}, 1000);//清除副作用return ()=>{clearInterval(time)}},[])return <div>son component</div>
}function App() {const [show,setShow] = useState(true)return (<div className="App">{show && <Son/>}<button onClick={()=>setShow(false)}>卸载子组件</button></div>);
}

自定义Hook实现

• 概念：自定义Hook是以use打头的函数，通过自定义hook函数可以用来实现逻辑的封装和复用
• 通过一个按钮控制div组件是否显示
• 本来的写法：

function App() {const [value,setValue] = useState(true)const qiehuan = ()=>{setValue(!value)}return (<div className="App">{value && <div>this is div</div>}    <button onClick={qiehuan}>切换</button></div>);
}

• 使用Hook进行封装之后的写法：

//自定义Hook函数
const useQiehuan = ()=>{const [value,setValue] = useState(true)const qiehuan = ()=>{setValue(!value)}return {value,qiehuan}
}function App() {const {value,qiehuan} = useQiehuan()return (<div className="App">{value && <div>this is div</div>}    <button onClick={qiehuan}>切换</button></div>);
}

封装自定义hook通用思路

1. 声明一个以use打头的函数（也可以不用use，为了语义化）
2. 在函数体内封装可复用的逻辑
3. 把组件中用到的状态和回调函数return出去（以对象或者数组）
4. 在哪个组件中要用到这个逻辑，就执行这个函数，结构出来状态和回调进行使用

React Hooks使用规则

1. 只能在组件中或者其他自定义Hook函数中调用
2. 只能在组件的顶层调用，不能嵌套在if for 或者其他函数中