React小结

1. setState

setState更新状态的2种写法

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

            1.stateChange为状态改变对象(该对象可以体现出状态的更改)

            2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用

         

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

            1.updater为返回stateChange对象的函数。

            2.updater可以接收到state和props。

            4.callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。

总结:

    1.对象式的setState是函数式的setState的简写方式(语法糖)

    2.使用原则:

        (1).如果新状态不依赖于原状态 ===> 使用对象方式

        (2).如果新状态依赖于原状态 ===> 使用函数方式

        (3).如果需要在setState()执行后获取最新的状态数据,

          要在第二个callback函数中读取

 2. lazyLoad

路由组件的lazyLoad

  //1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包

  const Login = lazy(()=>import('@/pages/Login'))

  //2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面

  <Suspense fallback={<h1>loading.....</h1>}>

        <Switch>

            <Route path="/xxx" component={Xxxx}/>

            <Redirect to="/login"/>

        </Switch>

    </Suspense>

3. Hooks

#### 1. React Hook/Hooks是什么?

```

(1). Hook是React 16.8.0版本增加的新特性/新语法

(2). 可以让你在函数组件中使用 state 以及其他的 React 特性

```

#### 2. 三个常用的Hook

```

(1). State Hook: React.useState()

(2). Effect Hook: React.useEffect()

(3). Ref Hook: React.useRef()

```

#### 3. State Hook

```

(1). State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作

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

(3). useState()说明:

        参数: 第一次初始化指定的值在内部作缓存

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

(4). setXxx()2种写法:

        setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值

        setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值

```

#### 4. Effect Hook

```

(1). Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)

(2). React中的副作用操作:

        发ajax请求数据获取

        设置订阅 / 启动定时器

        手动更改真实DOM

(3). 语法和说明:

        useEffect(() => {

          // 在此可以执行任何带副作用操作

          return () => { // 在组件卸载前执行

            // 在此做一些收尾工作, 比如清除定时器/取消订阅等

          }

        }, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行

   

(4). 可以把 useEffect Hook 看做如下三个函数的组合

        componentDidMount()

        componentDidUpdate()

      componentWillUnmount()

```

#### 5. Ref Hook

```

(1). Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据

(2). 语法: const refContainer = useRef()

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

```

4. Fragment 

### 使用

  <Fragment><Fragment>

  <></>

### 作用

> 可以不用必须有一个真实的DOM根标签了

5. Context 

### 理解

> 一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信

### 使用

```js

1) 创建Context容器对象:

  const XxxContext = React.createContext()  

2) 渲染子组时,外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据:

  <xxxContext.Provider value={数据}>

    子组件

    </xxxContext.Provider>

   

3) 后代组件读取数据:

  //第一种方式:仅适用于类组件

    static contextType = xxxContext  // 声明接收context

    this.context // 读取context中的value数据

   

  //第二种方式: 函数组件与类组件都可以

    <xxxContext.Consumer>

      {

        value => ( // value就是context中的value数据

          要显示的内容

        )

      }

    </xxxContext.Consumer>

```

### 注意

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


 

6. 组件优化 

### Component的2个问题

> 1. 只要执行setState(),即使不改变状态数据, 组件也会重新render() ==> 效率低

>

> 2. 只当前组件重新render(), 就会自动重新render子组件,纵使子组件没有用到父组件的任何数据 ==> 效率低

### 效率高的做法

>  只有当组件的state或props数据发生改变时才重新render()

### 原因

>  Component中的shouldComponentUpdate()总是返回true

### 解决

  办法1:

    重写shouldComponentUpdate()方法

    比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false

  办法2:  

    使用PureComponent

    PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true

    注意:

      只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false  

      不要直接修改state数据, 而是要产生新数据

  项目中一般使用PureComponent来优化



 

 7. render props 

### 如何向组件内部动态传入带内容的结构(标签)?

  Vue中:

    使用slot技术, 也就是通过组件标签体传入结构  <A><B/></A>

  React中:

    使用children props: 通过组件标签体传入结构

    使用render props: 通过组件标签属性传入结构,而且可以携带数据,一般用render函数属性

### 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}



 

<hr/>

8. 错误边界 

#### 理解:

错误边界(Error boundary):用来捕获后代组件错误,渲染出备用页面

#### 特点:

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

##### 使用方式:

getDerivedStateFromError配合componentDidCatch

```js

// 生命周期函数,一旦后台组件报错,就会触发

static getDerivedStateFromError(error) {

    console.log(error);

    // 在render之前触发

    // 返回新的state

    return {

        hasError: true,

    };

}

componentDidCatch(error, info) {

    // 统计页面的错误。发送请求发送到后台去

    console.log(error, info);

}

9. 组件通信方式总结 

组件间的关系:

- 父子组件

- 兄弟组件(非嵌套组件)

- 祖孙组件(跨级组件)

#### 几种通信方式:

    1.props:

      (1).children props

      (2).render props

    2.消息订阅-发布:

      pubs-sub、event等等

    3.集中式管理:

      redux、dva等等

    4.conText:

      生产者-消费者模式

#### 比较好的搭配方式:

    父子组件:props

    兄弟组件:消息订阅-发布、集中式管理

    祖孙组件(跨级组件):消息订阅-发布、集中式管理、conText(开发用的少,封装插件用的多)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/406033.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

4-17学习

//设置自动行数与字符换行 [label setNumberOfLines:0]; label.lineBreakMode UILineBreakModeWordWrap; /** 去除多余分割线 */ self.tableView.tableFooterView [[UIView alloc]init];转载于:https://www.cnblogs.com/pocket-mood/p/4435711.html

PyRun_SimpleFile()崩溃问题

From: http://blog.csdn.net/jq0123/article/details/1504406 PyRun_SimpleFile()造成程序崩溃&#xff0e;例程如下&#xff1a;#include "python.h"int main(){ Py_Initialize(); FILE * fp fopen("test.py", "r"); if …

翻译:Asp.net中多彩下拉框的实现

开发背景&#xff1a; 有人曾经要我开发一个根据不同选择而显示不同颜色的管理工具。我开始考虑利用下拉框来实现条目背景及显示颜色根据条目名称不同而进行变化&#xff0c;根据这个思路我在网上搜了半天也没有找到任何相关的解决方案&#xff0c;最后我想到了一个比当初需…

深入react技术栈(8):事件系统

我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号搜索前端小歌谣获取前端知识 1合成事件的绑定方式 2合成事件的实现机制 3在React中使用原生事件 4合成事件和原生事件混用 5对比react与原生事件 文章参考深入React技术栈

java mac jconsole_解决java maven项目找不到jconsole-1.8.0.jar和tools-1.8.0.jar包问题

今天遇到了这样一种情况&#xff0c;自己的maven项目中并没有引用的jar包出现在了Maven Dependencies的依赖包中。而我在pom.xml自己没有没有引入啊.图示怀疑是自己的alibaba 的druid所依赖的包&#xff1a;com.alibabadruid1.0.14然后查看了它的相关依赖&#xff0c;果然找到了…

PyRun_SimpleString的无穷怨念

From: http://blog.csdn.net/ccat/article/details/544491 好吧&#xff0c;我承认我是个菜鸟&#xff0c;所以今天我勇敢的站出来接受大家的鄙视…… 话说早上同事喊我帮他改段程序&#xff0c;很简单&#xff0c;就是用PyRun_SimpleString函数执行一段Python脚本。错误也很直…

劳心者、劳力者或CEO、CTO各得其所,足矣

昨天在手机上看到了“清华学生借鉴百度技术自主研发手机框计算”的新闻&#xff0c;又是“计算”&#xff0c;很容易就与“云计算”联系起来了&#xff0c;挺有兴趣了解一下中国百度的“框计算”。毕竟我之前只是知道这么一个名词&#xff0c;没想到这么快就有了研发、应用&…

hdu 1754 I Hate It(线段树)

题目链接&#xff1a;http://acm.hdu.edu.cn/showproblem.php?pid1754 I Hate It Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission(s): 45334 Accepted Submission(s): 17789 Problem Description很多学校流行一种比…

java numa_Java只使用2个CPU中的1个和NUMA(Neo4J)

我正在研究一个java程序来创建一个非常大的Neo4J数据库.我使用batchinserter和Executors.newFixedThreadPool来加快速度.我的Win2012R2服务器有2个cpu(26核心26超线程)和256GB NUMA架构.我的问题是,我的导入器只使用1个CPU(节点).是否有可能只使用一个javaprocess的NUMA节点&am…

cisco 交换机vlan-trunk的配置详解及应用实例:

虚拟局域网&#xff08;vlan&#xff09;&#xff1a;主要是为了分割广播域注&#xff1a;不同vlan之间不能相互通信。trunk&#xff1a;主要是为了不同交换机的相同vlan相互通信配置静态VLAN的步骤:************************************1.创建VLAN1)VLAN数据库配置模式:Switc…

java 登录拦截器_springMVC 拦截器-用户登录拦截实战

各位小伙伴咱们继续学习新知识今天要分享的就是拦截器不知道小伙伴们平时上网的时候有没有注意到,尤其是上网购物的时候,不登录账号,就无法访问一些功能页面,比如你不登录账号,就没法查看购物车里面有什么物品.这就是拦截器起到的作用.那么今天我们就来给之前的项目添加一个拦截…

vim匹配特定的行并删除它

From:http://robinfei.blog.sohu.com/111990727.html 删除包含特定字符的行&#xff1a; g/pattern/d 删除不包含指定字符的行&#xff1a; v/pattern/d g!/pattern/d 现实TAB键以及空格等&#xff1a; set list! 删除指定的行&#xff1a; :x,.d #从&#xff58;行…

React开发(171):处理删除与批量删除操作

//处理删除操作handleDelete (id, isBatch) > {if (isBatch && id.length 0) return message.warn(请勾选好友助力);}; 两个参数控制全选和非全选 nice 秒呀

java中异常+连接重置_是什么导致我的java.nett.ocketException:连接重置?

是什么导致我的java.nett.ocketException&#xff1a;连接重置&#xff1f;我们看到了频繁但断断续续的情况。java.net.SocketException: Connection reset我们日志中的错误。我们不确定Connection reset错误实际上来自&#xff0c;以及如何进行调试。这个问题似乎与我们试图发…

ubuntu下查看进程端口

ubuntu下查看进程端口 关键字: linux ubuntu # 查看所有打开的端口及服务名&#xff08;注意这里显示的服务名只是标准端口对应的服务名&#xff0c;可能并不准确&#xff09; nmap localhost # 查看哪些进程打开了指定端口port&#xff08;对于守护进程必须以root用户执行才能…

gzip和gunzip 解压参数

From:http://www.jb51.net/LINUXjishu/11041.html 点评&#xff1a;Linux压缩保留源文件的方法&#xff1a; gzip –c filename > filename.gz Linux解压缩保留源文件的方法&#xff1a; gunzip –c filename.gz > filename gunzip的用法 1.作用 gunzip命令作用是解压文…

React开发(172):React引入背景图片

import React, { Component } from react; import img1 from /assets/1.jpg;

Java游戏聊斋聂小倩_《聊斋倩女幽魂》聂小倩教你赢得战斗

即将由国内最大体感游戏平台——17Vee(亿旗体感)推出的3D单机体感游戏《聊斋之倩女幽魂》因其独特的战斗模式而备受关注。下面&#xff0c;就由《倩女幽魂》的女主角聂小倩来带大家亲身体验一把全新的体感战斗模式。第一步&#xff0c;当然是熟悉体感操作。在第一场战斗前&…