react 0至1 基础使用

1、useState

// useState实现一个计数器按钮
import { useState } from 'react'
function App () {// 1. 调用useState添加一个状态变量// count 状态变量// setCount 修改状态变量的方法const [count, setCount] = useState(0)// 2. 点击事件回调const handleClick = () => {// 作用: // 1. 用传入的新值修改count// 2. 重新使用新的count渲染UIsetCount(count + 1)}return (<div><button onClick={handleClick}>{count}</button></div>)
}export default App

2.useState  改变默认值

import { useState } from 'react'function App () {let [count, setCount] = useState(0)const handleClick = () => {// 直接修改 无法引发视图更新// count++// console.log(count)setCount(count + 1)}// 修改对象状态const [form, setForm] = useState({ name: 'jack' })const changeForm = () => {// 错误写法：直接修改// form.name = 'john'// 正确写法：setFrom 传入一个全新的对象setForm({...form,name: 'john'})}return (<div><button onClick={handleClick}>{count}</button><button onClick={changeForm}>修改form{form.name}</button></div>)
}export default App

 3.样式控制

// 导入样式
import './index.css'const style = {color: 'red',fontSize: '50px'
}function App () {return (<div>{/* 行内样式控制 */}<span style={style}>this is span</span>{/* 通过class类名控制 */}<span className="foo">this is class foo</span></div>)
}export default App

4.绑定表单

// 受控绑定表单import { useState } from "react"// 1. 声明一个react状态 - useState// 2. 核心绑定流程
// 1. 通过value属性绑定react状态
// 2. 绑定onChange事件 通过事件参数e拿到输入框最新的值 反向修改到react状态身上function App () {const [value, setValue] = useState('')return (<div><inputvalue={value}onChange={(e) => setValue(e.target.value)}type="text" /></div>)
}export default App

5. useRef 获取真是dom

// React中获取DOMimport { useRef } from "react"// 1. useRef生成ref对象 绑定到dom标签身上// 2. dom可用时，ref.current获取dom
// 渲染完毕之后dom生成之后才可用function App () {const inputRef = useRef(null)const showDom = () => {console.dir(inputRef.current)}return (<div><input type="text" ref={inputRef} /><button onClick={showDom}>获取dom</button></div>)
}export default App

6.父传子

// 父传子
// 1. 父组件传递数据  子组件标签身上绑定属性
// 2. 子组件接收数据  props的参数function Son (props) {// props：对象里面包含了父组件传递过来的所有的数据// { name:'父组件中的数据'}console.log(props)return <div>this is son, {props.name}, jsx: {props.child}</div>
}function App () {const name = 'this is app name'return (<div><Sonname={name}age={18}isTrue={false}list={['vue', 'react']}obj={{ name: 'jack' }}cb={() => console.log(123)}child={<span>this is span</span>}/></div>)
}export default App

7、子传父

// 核心：在子组件中调用父组件中的函数并传递实参import { useState } from "react"function Son ({ onGetSonMsg }) {// Son组件中的数据const sonMsg = 'this is son msg'return (<div>this is Son<button onClick={() => onGetSonMsg(sonMsg)}>sendMsg</button></div>)
}function App () {const [msg, setMsg] = useState('')const getMsg = (msg) => {console.log(msg)setMsg(msg)}return (<div>this is App, {msg}<Son onGetSonMsg={getMsg} /></div>)
}export default App

8、兄弟组件传值

// 1. 通过子传父 A -> App
// 2. 通过父传子 App -> Bimport { useState } from "react"function A ({ onGetAName }) {// Son组件中的数据const name = 'this is A name'return (<div>this is A compnent,<button onClick={() => onGetAName(name)}>send</button></div>)
}function B ({ name }) {return (<div>this is B compnent,{name}</div>)
}function App () {const [name, setName] = useState('')const getAName = (name) => {console.log(name)setName(name)}return (<div>this is App<A onGetAName={getAName} /><B name={name} /></div>)
}export default App

9、跨层级传递数据

// App -> A -> Bimport { createContext, useContext } from "react"// 1. createContext方法创建一个上下文对象const MsgContext = createContext()// 2. 在顶层组件 通过Provider组件提供数据// 3. 在底层组件 通过useContext钩子函数使用数据function A () {return (<div>this is A component<B /></div>)
}function B () {const msg = useContext(MsgContext)return (<div>this is B compnent,{msg}</div>)
}function App () {const msg = 'this is app msg'return (<div><MsgContext.Provider value={msg}>this is App<A /></MsgContext.Provider></div>)
}export default App

10.useEffect-概念理解和基础使用

import { useEffect, useState } from "react"const URL = 'http://www'function App () {// 创建一个状态数据const [list, setList] = useState([])useEffect(() => {// 额外的操作 获取频道列表async function getList () {const res = await fetch(URL)const jsonRes = await res.json()console.log(jsonRes)setList(jsonRes.data.channels)}getList()}, [])return (<div>this is app<ul>{list.map(item => <li key={item.id}>{item.name}</li>)}</ul></div>)
}export default App

11、.useEffect-不同依赖项下的执行时机

import { useEffect, useState } from "react"function App () {// 1. 没有依赖项  初始 + 组件更新const [count, setCount] = useState(0)// useEffect(() => {//   console.log('副作用函数执行了')// })// 2. 传入空数组依赖  初始执行一次// useEffect(() => {//   console.log('副作用函数执行了')// }, [])// 3. 传入特定依赖项  初始 + 依赖项变化时执行useEffect(() => {console.log('副作用函数执行了')}, [count])return (<div>this is app<button onClick={() => setCount(count + 1)}>+{count}</button></div>)
}export default App

12、useEffect-清除副作用

import { useEffect, useState } from "react"function Son () {// 1. 渲染时开启一个定时器useEffect(() => {const timer = setInterval(() => {console.log('定时器执行中...')}, 1000)return () => {// 清除副作用(组件卸载时)clearInterval(timer)}}, [])return <div>this is son</div>
}function App () {// 通过条件渲染模拟组件卸载const [show, setShow] = useState(true)return (<div>{show && <Son />}<button onClick={() => setShow(false)}>卸载Son组件</button></div>)
}export default App

13.封装自定义Hook

// 封装自定义Hook// 问题: 布尔切换的逻辑 当前组件耦合在一起的 不方便复用// 解决思路: 自定义hookimport { useState } from "react"function useToggle () {// 可复用的逻辑代码const [value, setValue] = useState(true)const toggle = () => setValue(!value)// 哪些状态和回调函数需要在其他组件中使用 returnreturn {value,toggle}
}// 封装自定义hook通用思路// 1. 声明一个以use打头的函数
// 2. 在函数体内封装可复用的逻辑（只要是可复用的逻辑）
// 3. 把组件中用到的状态或者回调return出去（以对象或者数组）
// 4. 在哪个组件中要用到这个逻辑，就执行这个函数，解构出来状态和回调进行使用function App () {const { value, toggle } = useToggle()return (<div>{value && <div>this is div</div>}<button onClick={toggle}>toggle</button></div>)
}export default App