react-交互-异步uis

常见的改变数据的方法是setState, setState(data,callback)方法有两个参数。

1. 这个方法会把data合并到state中,并且重新渲染页面。

2. 当页面重新渲染完成后,callback方法就会被触发。大多数情况下,我们不需要手动调用callback, 因为在state发生改变后,更新页面的功能,react 已经帮我们实现了。

很多数据都可以从父级传来的props上获取,那我们什么时候需要用state呢?

以下三种情况需要把信息保存到state上面:

1. 需要通过输入框输入的信息。

2. 发送request, 从服务器重新获取的数据。

3. 实时信息。

说了一些数据需要绑定到state上面,但过多的数据绑定到state上面,一方面肯定会造成维护困难,另一方面,因为state的改变,页面会重新渲染,过多的绑定,肯定会导致渲染性能下降的问题呢,那什么情况下, 数据是不需要保存到state上面呢?

1. 待计算的值。

2. react的组件。

3. 从props上面复制的值。

参考文档:http://reactjs.cn/react/docs/interactivity-and-dynamic-uis.html

时间: 2025-01-31 06:33:32

react-交互-异步uis的相关文章

React.lazy和React.Suspense异步加载组件

在React16.6中引入了React.lazy和React.Suspense,这两个组件,可以用来实现异步加载组件. 例如: const johanComponent = React.lazy(() => import(/* webpackChunkName: "johanComponent" */ './myAwesome.component')); export const johanAsyncComponent = props => ( <React.Susp

Ajax异步交互 [异步对象连接服务器]

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>XMLHttpRequest</title> <script> var xmlHttp; //声明一个全局变量xmlHttp,主要是考虑到异步对象在整个页面进程中都有可能使用到. function createXMLHttpRequest(){ //创建一个异步对象的函数, if(win

react之异步请求数据,render先行渲染报错,未拿到数据

import React from 'react' import {connect} from 'react-redux' import { Redirect} from 'react-router-dom' import axios from 'axios' import {login} from './Auth.redux.js' //两个reducers 每个reducers都有一个state @connect( (state)=>state.auth, {login} ) class A

React中异步模块api React.lazy和React.Suspense

React.lazy React.lazy 这个函数需要动态调用 import().它必须返回一个 Promise,该 Promise 需要 resolve 一个 defalut export 的 React 组件. 然后应在 React.Suspense 组件中渲染 lazy 组件,如此使得我们可以使用在等待加载 lazy 组件时做优雅降级(如 loading 指示器等). 比如: const OtherComponent = React.lazy(() => import('./OtherC

2019年17道高频React面试题及详解

以下面试题来源于github项目前端面试指南,那里有超过200道高频前端面试题及答案,目前拥有1400star. 为什么选择使用框架而不是原生?框架的好处: 组件化: 其中以 React 的组件化最为彻底,甚至可以到函数级别的原子组件,高度的组件化可以是我们的工程易于维护.易于组合拓展.天然分层: JQuery 时代的代码大部分情况下是面条代码,耦合严重,现代框架不管是 MVC.MVP还是MVVM 模式都能帮助我们进行分层,代码解耦更易于读写.生态: 现在主流前端框架都自带生态,不管是数据流管理

【react自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目

前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功成为当前最火热的三大前端框架之一.相比于Angular,React更加轻量.而相对于另一个轻量级前端框架Vue来说,React虽然学习和使用起来难度稍微大一些,但是React的社区相对来说人气更旺,而且在移动端的开发上面,大名鼎鼎的React Native更是尽显优势,在代码性能上要好过Vue框架.

盘点 React 16.0 ~ 16.5 主要更新及其应用

目录 0. 生命周期函数的更新 1. 全新的 Content API 2. React Strict Mode 3. Portal 4. Refs 5. Fragment 6. 其他 7. 总结 生命周期函数的更新 随着 React 16.0 发布, React 采用了新的内核架构 Fiber,在新的架构中它将更新分为两个阶段:Render Parse 和 Commit Parse, 也由此引入了 getDerivedStateFromProps . getSnapshotBeforeUpdat

【转载】千万级规模高性能、高并发的网络架构经验分享

在开始谈我对架构本质的理解之前,先谈谈对今天技术沙龙主题的个人见解,千万级规模的网站感觉数量级是非常大的,对这个数量级我们战略上 要重视它,战术上又要藐视它.先举个例子感受一下千万级到底是什么数量级?现在很流行的优步(Uber),从媒体公布的信息看,它每天接单量平均在百万左右, 假如每天有10个小时的服务时间,平均QPS只有30左右.对于一个后台服务器,单机的平均QPS可以到达800-1000,单独看写的业务量很简单 .为什么我们又不能说轻视它?第一,我们看它的数据存储,每天一百万的话,一年数据

【并发与负载】千万级规模高性能、高并发的网络架构经验分享

架构以及我理解中架构的本质 在开始谈我对架构本质的理解之前,先谈谈对今天技术沙龙主题的个人见解,千万级规模的网站感觉数量级是非常大的,对这个数量级我们战略上 要重 视 它 , 战术上又 要 藐 视 它.先举个例子感受一下千万级到底是什么数量级?现在很流行的优步(Uber),从媒体公布的信息看,它每天接单量平均在百万左右, 假如每天有10个小时的服务时间,平均QPS只有30左右.对于一个后台服务器,单机的平均QPS可以到达800-1000,单独看写的业务量很简单 .为什么我们又不能说轻视它?第一,