Sikara

React扩展+ReactHook

React扩展+ReactHook

1_setState------该方法是异步更新

setState(stateChange, [callback])------对象式的setState

第一个参数是更新对象，他还有另一个可选参数callback在页面更新完后调用（用于拿到新的state）

setState(updater, [callback])------函数式setState

第一个参数updater为返回stateChange对象的函数（updater可以接收到state和props）

//对象式的setState
		/* //1.获取原来的count值
		const {count} = this.state
		//2.更新状态
		this.setState({count:count+1},()=>{
			console.log(this.state.count);
		})
		//console.log('12行的输出',this.state.count); //0 */

		//函数式的setState
		this.setState( state =>(
			state.count++))

2_lazyLoad 路由组件的懒加载

回顾：组件划分：1 一般组件 2 路由组件

实现还需要Suspense组件，fallback返回一个组件充当加载等待期间的显示

//lazy方法和import函数去设置需要懒加载的路由组件---相当于给路由链接设计一个点击事件，调用才进行路由组件加载
const Home = lazy(()=> (import('./Home')) )
//2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面
<Suspense fallback={<h1>loading.....</h1>}>
    <Switch>
        <Route path="/xxx" component={Xxxx}/>
        <Redirect to="/login"/>
    </Switch>
</Suspense>

State Hook useState------函数组件也能有state状态

语法: const [xxx, setXxx] = React.useState(initValue)

initValue一开始初始化赋值给xxx并缓存

返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数

使用定义函数更新状态两种写法：

//setCount(count+1) //第一种写法
setCount(count => count+1 )

Effect Hook useEffect在函数组件中执行副作用操作

本质：用于模拟类组件中的生命周期钩子

React中的副作用操作:
发ajax请求数据获取
设置订阅 / 启动定时器
手动更改真实DOM

语法和说明:
useEffect(() => {
// 在此可以执行任何带副作用操作
return () => { // 在组件卸载前执行 / 组件状态更新也会执行
// 在此做一些收尾工作, 比如清除定时器/取消订阅等
}
}, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行

把 useEffect Hook 看做如下三个函数的组合：
componentDidMount() [] (默认是空)
componentDidUpdate() [指定要监听更新的属性] (用的较少)
componentWillUnmount() ([] (最好默认是空)将要卸载时useEffect返回的函数就会触发)

Ref Hook useRef

语法: const refContainer = useRef()

绑定组件：

作用:保存标签对象,功能与React.createRef()一样

Fragment

组件标签必须是一对闭合标签：传统做法是

…

可以替换成 / <></> （Fragment标签里只能携带key属性，空标签什么属性都不能加）

回顾：！！！第一个参数放的是对象类型，而且是新对象，不是一个变量名引用的对象，否则将默认为

Context

除了props可以做到父子间通信，context也可以，但常用于父组件与孙组件及之后的后代组件间通信

使用

  1. 创建Context容器对象：(写在父组件的全局)
    const XxxContext = React.createContext()

  2. 渲染子组时，外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据：
    <xxxContext.Provider value={数据}>
    子组件
    </xxxContext.Provider>

  3. 后代组件读取数据：

1) 创建Context容器对象：
	const XxxContext = React.createContext()  
	
2) 渲染子组时，外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据：
	<xxxContext.Provider value={数据(可以是对象)}>
		子组件
    </xxxContext.Provider>
    
3) 后代组件读取数据：

	//第一种方式:仅适用于类组件 
	  static contextType = xxxContext  // 声明接收context
	  const {username,age} = this.context // 读取context中的value数据
	  
	//第二种方式: 函数组件与类组件都可以
	  <xxxContext.Consumer>
	    {
	      value => ( // value就是context中的value数据
	        要显示的内容
	      )
	    }
	  </xxxContext.Consumer>

注意

在应用开发中一般不用context, 一般都它的封装react-redux

组件优化 PureComponent

回顾diff算法对虚拟DOM和真实DOM的数据的更新规则并选择合适的key值进行的优化

  • 使用Index作为key值，虚拟dom对比就是顺序对比，如果在数组前面插入元素，它需要对比整个数组，用id属性，只需要一次

DOM的更新往上则是组件优化

  • 问题产生的表层原因setState，（hook则是useState需要更新的属性是引用类型[],{}）就会频繁地触发更新，对于跟其state无关的内部嵌套组件造成不必要更新
  • 本质原因Component中的shouldComponentUpdate()总是返回true

解决

办法1: 
	重写shouldComponentUpdate()方法
	比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false
	shouldComponentUpdate(nextProps,nextState){
		console.log(this.props,this.state); //目前的props和state
		console.log(nextProps,nextState); //接下要变化的目标props，目标state
		return !this.props.carName === nextProps.carName
	}
办法2:  
	使用PureComponent
	PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true
	注意: 
		只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false  
		不要直接修改state数据, 而是要产生新数据
项目中一般使用PureComponent来优化

renderProps

回顾：拿到标签里的内容------是props的一个属性children

children，renderProps共同作用：向组件内部动态传入带内容的结构(标签)，vue用的是slot技术

children props 可读性强，但不能组件间通信
<A>
  <B>xxxx</B>
</A>
{this.props.children}
问题: 如果B组件需要A组件内的数据, ==> 做不到
render props 可读性较差，能组件间通信
<A render={(data) => <C data={data}></C>}></A>
A组件: {this.props.render(内部state数据)}
C组件: 读取A组件传入的数据显示 {this.props.data}

错误边界

理解：

错误边界：用来捕获后代组件错误，渲染出备用页面

特点：

只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误

使用方式：

getDerivedStateFromError配合componentDidCatch

// 生命周期函数，一旦后台组件报错，就会触发	可用于生产模式显示给用户
static getDerivedStateFromError(error) {
    console.log(error);
    // 在render之前触发
    // 返回新的state
    return {
        hasError: true,
    };
}

componentDidCatch(error, info) {
    // 统计页面的错误。发送请求发送到后台去
    console.log(error, info);
}

组件通信方式总结

方式：

	props：
		(1).children props
		(2).render props
	消息订阅-发布：
		pubs-sub、event等等
	集中式管理：
		redux、dva等等
	conText:
		生产者-消费者模式

组件间的关系

	父子组件：props
	兄弟组件(非嵌套组件)：消息订阅-发布、集中式管理
	祖孙组件(跨级组件)：消息订阅-发布、集中式管理、conText(用的少)

Sikara

© 2025 Sikara