useState基础使用

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

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基础使用

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

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

自定义一个hook函数，实现获取滚动距离Y
自定义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基本使用

导入 useRef 函数
执行 useRef 函数并传入null，返回值为一个对象内部有一个current属性存放拿到的dom对象（组件实例）
通过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)

React 高级使用相关推荐

React高级指引：无障碍
上一节:以React的方式思考下一节:代码分割 React高级指引:无障碍为什么要使用无障碍辅助功能标准和指南 WCAG WAI-ARIA 语义化的HTML 无障碍表单标签向用户提醒错误控 ...
[译]React高级话题之Context
前言本文为意译,翻译过程中掺杂本人的理解,如有误导,请放弃继续阅读. 原文地址:Context Context提供了一种不需要手动地通过props来层层传递的方式来传递数据. 正文在典型的Reac ...
React 高级应用 -- 错误边界 Error Boundaries
GitHub 学习 Demo. 部分 UI 的异常不应该破坏了整个应用.为了解决 React 用户的这一问题,React 16 引入了一种称为 "错误边界" 的新概念. 错误边界的 ...
React高级话题之Refs and the DOM
前言本文为意译,翻译过程中掺杂本人的理解,如有误导,请放弃继续阅读. 原文地址:Refs and the DOM 正文 Refs提供了一种访问在render方法里面创建的React element或 ...
React高级特性之Render Props
render prop是一个技术概念.它指的是使用值为function类型的prop来实现React component之间的代码共享. 如果一个组件有一个render属性,并且这个render属性的 ...
P26:React高级-多DOM动画制作和编写react-transition-group
React16 基础阐述使用 TransitionGroup 加入 `` 标签 demo index.js Beauty.js BeautyItem.js Boss.js exp.css 接口 p ...
四：以理论结合实践方式梳理前端 React 框架 ——— React 高级语法
事件处理 react 内置组件的事件处理 react 内置组件是指 react 中已经定义好的,可以直接使用的如 div.button.input 等与原生 HTML 标签对应的组件 <!DOC ...
React高级-PropTypes校验传递值
PropTypes的简单应用我们在Xiaojiejie.js组件里传递了4个值,有字符串,有数字,有方法,这些都是可以使用PropTypes限制的.在使用需要先引入PropTypes. import ...
React高级备忘录（生命周期）class component
须知什么是生命周期?就像人有生老病死,component也有类似这样的概念,了解生命周期可以让我们知道如何在「对」的时间做「对」的事. - Lieutenant 过! 常用生命周期可以分为三大部分 ...

React 高级使用

useState基础使用

useEffect基础使用

自定义hook

useRef基本使用

hooks-useContext高级使用

初始化mobx

mobx模块化

React 高级使用相关推荐

最新文章

热门文章