![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React Hook
qq_21696621
这个作者很懒,什么都没留下…
展开
-
使用useMemo和Callback Hooks(没掌握)
参考:https://blog.csdn.net/wu_xianqiang/article/details/103981087没使用memo例子每次点击button,Counter组件都会被渲染两次;import React,{Component,useState,useMemo,memo} from 'react';const Counter = ({value, children}) => { console.log('Render: ', children) ret翻译 2021-03-12 11:39:03 · 100 阅读 · 0 评论 -
使用Context Hook
基础context写法import React,{createContext, useState} from 'react';const CountContext = createContext();class Foo extends React.Component{ render(){ return ( <CountContext.Consumer> { count => <h1>{count}<翻译 2021-03-11 18:04:12 · 318 阅读 · 0 评论 -
使用 Effect Hook
class方式componentDidMount、componentWillUnmount、componentDidUpdate生命周期函数import React from 'react';export default class App extends React.Component { state = { count:0, size:[window.innerWidth,window.innerHeight] }; onResize = ()=>{ th翻译 2021-03-11 17:35:33 · 89 阅读 · 0 评论 -
使用 State Hook
单状态(state)import React , {useState} from 'react';export default function App() { const [count,setCount] = useState(0); // 声明一个叫 “count” 的 state 变量,初始值设置0 return ( <button type="button" onClick={()=>{setCount(count+1)}} >翻译 2021-03-11 16:09:09 · 66 阅读 · 0 评论 -
React Hook的概念与意义
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。类组件的不足:状态逻辑复用难 缺少复用机制 渲染属性和高阶组件导致层级冗余 趋向复杂难以维护 生命周期函数混杂不相干逻辑 相干逻辑分散在不同生命周期 this指向困扰 内联函数过度创建新句柄 类成员函数不能保证this Hook优化类组件的三个不足自定义Hook方便复用状态逻辑 副作用的关注点分离 函数组件无this问题例翻译 2021-03-10 18:26:22 · 257 阅读 · 0 评论