React 高级使用

目录

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 = count
    console.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.scrollTop
    setY(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>
      ComA
      app->{count}
      <ComC />
    </div>
  )
}
function ComC(){
 const count = useContext(Context)
  return (
    <div>
      ComC
      app->{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)
  }
  // 修改list
  addList = ()=>{
    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)