目录

useState基础使用

useEffect基础使用

自定义hook

useRef基本使用

hooks-useContext高级使用

初始化mobx

mobx模块化

---

 

useState基础使用

1. 导入useState函数 ->react
2. 调用 useState 函数，并传入状态的初始值
3. 从useState函数的返回值中，拿到状态和修改状态的方法
4. 在JSX中展示状态
5. 调用修改状态的方法更新状态

import React,{useState} from 'react'
// 导入useState函数 ->react
// 执行函数并传参，必须在函数组件中
// [数据，修改数据方法]
// 使用数据，修改数据
function App(params) {// useState(默认值)const [count,setCount] = useState(0)const [flag,setFlag] = useState(true)const [list,setList] = useState([])function test(){setCount(count+1)setFlag(false)setList([1,2,3,4])}return (<div>{flag ? '1':'0'}{list.join("-")}<button type="" onClick={test}>{count}</button></div>)
}export default App

useEffect基础使用

1. 导入useEffect函数
2. 在函数组件中执行，传入回调，并定义副作用
3. 通过修改状态更新组件时，副作用也会不断执行
4. 依赖项控制副作用执行时机

import React,{useState,useEffect} from 'react'
// 修改数据，将count最新值放到页面标题中
// 导入useEffect函数
// 在函数组件中执行，传入回调，并定义副作用
// 通过修改状态更新组件时，副作用也会不断执行
// 依赖项控制副作用执行时机// 默认状态（无依赖项）
// 添加空数组依赖项，组件初始化执行一次
// 添加特定依赖项
// 注意事项
// 只要在useEffect回调函数中用到的数据状态，应该在依赖项数据中声明
function App(params) {// useState(默认值)const [count,setCount] = useState(0)const [name,setName] = useState('jack')useEffect (()=>{// 定义副作用document.title = countconsole.log(name);},[count,name])const [flag,setFlag] = useState(true)const [list,setList] = useState([])function test(){setCount(count+1)setFlag(false)setList([1,2,3,4])}return (<div><button type="" onClick={test}>{count}</button><button type="" onClick={()=>setName('cp')}>{name}</button></div>)
}export default App

自定义hook

1. 自定义一个hook函数，实现获取滚动距离Y
2. 自定义hook函数，可以自动同步到本地LocalStorage

useWindowScroll.js 

import {useState,useEffect} from 'react'
export function useWindowScroll() {const [y,setY] = useState(0)// 滚动行为发生，获取滚动值window.addEventListener('scroll',()=>{const h = document.documentElement.scrollTopsetY(h)})return [y]}
export function useLocalStorage(key,defaultValue){const [message,setMessage] = useState(defaultValue)// 数据状态改变，自动同步本地useEffect(()=>{window.localStorage.setItem(key,message)},[message,key])return [message,setMessage]}

App.js

import React,{useState,useEffect} from 'react'
import {useWindowScroll,useLocalStorage} from './hooks/useWindowScroll'
function App() {const [y] = useWindowScroll()const [message,setMessage] = useLocalStorage('hook-key','皮皮猪')setTimeout(() => {setMessage('cp')}, 5000);return (<div style={{height:"1200px"}}>{y}{message}</div>)
}
export default App

useRef基本使用

1. 导入 useRef 函数
2. 执行 useRef 函数并传入null，返回值为一个对象 内部有一个current属性存放拿到的dom对象（组件实例）
3. 通过ref 绑定 要获取的元素或者组件

import React,{useState,useEffect,useRef} from 'react'
class TestC extends React.Component{state = {name:'皮皮猪'}getName = ()=>{return 'this,is '}render(){return (<div>类组件</div>)}
}
function Counter(props){const [count,setCount] = useState(()=>{return props.count})return (<div><button type="" onClick={()=>setCount(count+1)}>{count}</button></div>)}
function Test(){useEffect(()=>{let timer = setInterval(()=>{console.log(456);},1000)return ()=>{clearInterval(timer)}},[])return (<div>test </div>)
}
function App() {const testRef = useRef(null)const h1Ref = useRef(null)useEffect(()=>{console.log(testRef.current,h1Ref.current);},[])const [flag,setFlag] = useState(true)return (<div><button type="" onClick={()=> setFlag(!flag)}>切换</button> */}<TestC ref={testRef} /><h1 ref={h1Ref}>h1</h1></div>)
}
export default App

hooks-useContext高级使用

context.js

 

import {createContext} from 'react'
const Context = createContext()
export default Context

App.js

 

import React,{useState,useContext,useEffect,useRef} from 'react'
import Context from './context'
// const Context = createContext()
function ComA(){const count = useContext(Context)return (<div>ComAapp->{count}<ComC /></div>)
}
function ComC(){const count = useContext(Context)return (<div>ComCapp->{count}</div>)
}
function App() {const [count,setCount] =useState(20)return (<Context.Provider value={count}><div><ComA /><button type="" onClick={()=>setCount(count+1)}>+</button></div></Context.Provider>)
}export default App

初始化mobx

// 导入counterStore
import counterStore from './store/counter.Store'
// 导入observer方法
import { observer } from 'mobx-react-lite'function App () {return (<div className="App">{/* 渲染数据 */}{counterStore.count}{/* 使用计算属性 */}{counterStore.filterList.join(',')}<button type="" onClick={counterStore.addCount}>+</button><button type="" onClick={counterStore.addList}>修改数组</button></div>)
}export default observer(App)

mobx模块化

index.js

// 组合子模块
// 封装统一导出业务方法
import React from 'react'
import {ListStore} from './list.store'
import {CounterStore} from './counter.Store'
// 声明一个root
class RootStore{constructor(){// 对子模块实例化this.counterStore = new CounterStore()this.listStore = new ListStore()}
}// 实例化操作(样板代码)
const rootStore = new RootStore()
const context = React.createContext(rootStore)
// 通过useContext拿到rootStore实例对象，返回
// 只需要在业务组件中，调用useStore() -> rootStroe
const useStore = ()=> React.useContext(context)
export { useStore }

counter.Store.js

import { makeAutoObservable } from 'mobx'
class CounterStore{// 定义数据count = 0// 定义原始数据list = [1,2,3,4,5,6]constructor(){// 响应式数据makeAutoObservable(this)}// 定义计算属性get filterList (){return this.list.filter(item => item >2)}// 修改listaddList = ()=>{this.list.push(7,8,9)}// 定义修改数据方法addCount = ()=>{this.count++}
}
// const counterStore = new CounterStore()
export  {CounterStore}

App.js

// 导入counterStore
// import counterStore from './store/counter.Store'
// 导入observer方法
import { observer } from 'mobx-react-lite'
import {useStore} from './store/index'function App () {// 解构赋值 到store实例对象就可以const {counterStore,listStore} = useStore()// console.log(rootStore);return (<div className="App">{counterStore.count}<button type="" onClick={counterStore.addCount}>+</button></div>)
}export default observer(App)