React组件化开发(6)- setState&性能优化(4)

只要调用了this.setState(),就会调用render()更新DOM。所以如果要修改数据必须通过setState,否则可能数据发生了改变,页面内容并没有改变。9.1setState是异步的setState设计为异步,可以显著的提升性能;如果每次调用 setState都进行一次更新,那么意味着render函数会被频繁调用,界面重新渲染,这样效率是很低的;最好的办法应该是获取到多个更新,之后进

- 阅读全文 -

React组件化开发(6)- 组件之间的通信(3)

6.1父子组件通信父组件传数据给子组件:通过 props 属性自上而下(由父及子)进行传递父组件通过 属性=值 的形式来传递数据给子组件子组件通过 props 对象参数获取父组件传过来的数据1.类组件写法import React, { Component } from 'react' class ChildCpn extends Component { constructor(props)

- 阅读全文 -

React组件化开发(6)-生命周期(2)

认识生命周期很多事物都有从创建到销毁的整个过程,而这个过程就叫生命周期React组件也有自己的生命周期,了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能生命周期和生命周期函数的关系:4.1生命周期生命周期只是一个抽象的概念,在生命周期的过程,分成了很多个阶段:比如挂载阶段(Mount),组件第一次在DOM树渲染的过程。比如更新阶段(Update),组件在状态发生变化,重新更新渲染的过程

- 阅读全文 -

React组件化开发(6)- react的组件化(1)

1.分而治之的思想人面对复杂问题的处理方式:任何一个人处理信息的逻辑能力都是有限的所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容如果将一个复杂的问题拆分成一个个可以处理的小问题,再放其整体当中,你会发现大问题也会迎刃而解上面的思想就是分而治之的思想:分而治之是软件工程的重要思想,是复杂系统开发和维护的基石而前端目前的模块化和组件化都是基于分而治之的思想2.什么是组件化开发组件

- 阅读全文 -

React脚手架中的webpack(5)

前面说目前前端三大框架的脚手架都是基于webpack来配置的:webpack 是一个现代 JavaScript 应用程序的 静态模块打包器(module bundler)当 webpack 处理应用程序时,它会递归地构建一个 依赖关系图(dependency graph) ,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle ;webpack官网有张图:1.react

- 阅读全文 -

React脚手架(4)

1.前端工程的复杂化如果我们只是开发一些小demo,那么永远不用考虑一些复杂的问题:比如文件的目录划分比如如何管理文件之间的相互依赖比如管理第三方模块的依赖比如项目发布前如何压缩,打包项目..现代的前端项目已经越来越复杂了:不会再是html文件中引入几个css文件,引入几个编写的js或者第三方js文件那么简单了。比如css可能是使用sass、less等预处理进行编写的,我们需要将它们转换成普通的c

- 阅读全文 -

JSX的本质(3)

实际上JSX只是React.createElement(component,props,children)函数的语法糖。1.什么是语法糖?如果写React.createElement这种太复杂了,我们就延伸出了一种简单的方法,就是说我们写JSX更简单效果却和写React.createElement一样,我们在里面尝到了甜头,可以称为这个函数的语法糖。JSX最终都会被转换成React.createE

- 阅读全文 -

React-JSX核心语法(2)

JSX核心语法什么是JSX?JSX是JavaScript的一种扩展语法(eXtension),也称为JavaScript XML,因为看起来就像XML语法。JSX是完全包容JS语法的。const element= <h1></Hello,World!></h2>上面的代码像什么?像JS,但是js并不能赋值html元素,它就是JSX的语法,并且其完成可以和Java

- 阅读全文 -

React初始(1)

React是2013年,Facebook开源的JavaScript框架React的特点:声明式编程组件化开发多平台适配React开发依赖开发React必须依赖三个库:react:包含react所必须的核心代码react-dom:react渲染在不同平台所需要的核心代码babel:将jsx转换成React代码的工具引入React依赖方式1:cdn引入方式2:下载到本地引入方式3:npm下载初步使用r

- 阅读全文 -

css指定几行超出显示省略号

display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式text-overflow,可以用来多行文本的情况下,用省略号“...”隐藏超出范围的文本上面三个属性是必须要加上的。-webkit-line-clamp:指定几行display: -webkit-box; -we

- 阅读全文 -

热门文章

最新文章

最近回复

  • 彩虹海: 这个倒没考虑,排版第一
  • 彩虹海: 啊 hhh
  • 辛落: 一言难尽的感觉。 逛着逛着看到了自己的blog#run 我,萌新萌新。
  • 林林: 之前也一直对这块很晕,感谢! 但你把文章主体内容加到代码这个区块...
  • Jone: 《中国道藏》据说有点东西
  • Jone: node!
  • Ajiang: 我也就只知道这个了
  • Ajiang: 这主题不错呀
  • Ajiang: 手机玩坏了,惨啊,你有手机救砖方面的研究吗?
  • 彩虹海: {吃瓜}研究不来

分类

标签

归档

其它