React组件化开发(6)- 组件之间的通信(3)
6.1父子组件通信父组件传数据给子组件:通过 props 属性自上而下(由父及子)进行传递父组件通过 属性=值 的形式来传递数据给子组件子组件通过 props 对象参数获取父组件传过来的数据1.类组件写法import React, { Component } from 'react' class ChildCpn extends Component { constructor(props)
6.1父子组件通信父组件传数据给子组件:通过 props 属性自上而下(由父及子)进行传递父组件通过 属性=值 的形式来传递数据给子组件子组件通过 props 对象参数获取父组件传过来的数据1.类组件写法import React, { Component } from 'react' class ChildCpn extends Component { constructor(props)
认识生命周期很多事物都有从创建到销毁的整个过程,而这个过程就叫生命周期React组件也有自己的生命周期,了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能生命周期和生命周期函数的关系:4.1生命周期生命周期只是一个抽象的概念,在生命周期的过程,分成了很多个阶段:比如挂载阶段(Mount),组件第一次在DOM树渲染的过程。比如更新阶段(Update),组件在状态发生变化,重新更新渲染的过程
1.分而治之的思想人面对复杂问题的处理方式:任何一个人处理信息的逻辑能力都是有限的所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容如果将一个复杂的问题拆分成一个个可以处理的小问题,再放其整体当中,你会发现大问题也会迎刃而解上面的思想就是分而治之的思想:分而治之是软件工程的重要思想,是复杂系统开发和维护的基石而前端目前的模块化和组件化都是基于分而治之的思想2.什么是组件化开发组件
前面说目前前端三大框架的脚手架都是基于webpack来配置的:webpack 是一个现代 JavaScript 应用程序的 静态模块打包器(module bundler)当 webpack 处理应用程序时,它会递归地构建一个 依赖关系图(dependency graph) ,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle ;webpack官网有张图:1.react
1.前端工程的复杂化如果我们只是开发一些小demo,那么永远不用考虑一些复杂的问题:比如文件的目录划分比如如何管理文件之间的相互依赖比如管理第三方模块的依赖比如项目发布前如何压缩,打包项目..现代的前端项目已经越来越复杂了:不会再是html文件中引入几个css文件,引入几个编写的js或者第三方js文件那么简单了。比如css可能是使用sass、less等预处理进行编写的,我们需要将它们转换成普通的c
实际上JSX只是React.createElement(component,props,children)函数的语法糖。1.什么是语法糖?如果写React.createElement这种太复杂了,我们就延伸出了一种简单的方法,就是说我们写JSX更简单效果却和写React.createElement一样,我们在里面尝到了甜头,可以称为这个函数的语法糖。JSX最终都会被转换成React.createE
JSX核心语法什么是JSX?JSX是JavaScript的一种扩展语法(eXtension),也称为JavaScript XML,因为看起来就像XML语法。JSX是完全包容JS语法的。const element= <h1></Hello,World!></h2>上面的代码像什么?像JS,但是js并不能赋值html元素,它就是JSX的语法,并且其完成可以和Java
React是2013年,Facebook开源的JavaScript框架React的特点:声明式编程组件化开发多平台适配React开发依赖开发React必须依赖三个库:react:包含react所必须的核心代码react-dom:react渲染在不同平台所需要的核心代码babel:将jsx转换成React代码的工具引入React依赖方式1:cdn引入方式2:下载到本地引入方式3:npm下载初步使用r