react基础用法二(组件渲染) 如图所示组件可以是函数 格式:function 方法名(){ return <标签>内容</标签>} 渲染格式: <方法名 /> 即可把方法体内的内容渲染到页面 如图所示这是像组件内传递渲染元素 在react都基本由props来接受传入的参数和react基础一的方法一样传入的都是key:value  这里key是name,value则是cookie 所以在当你要取元素的时候是props.key也就是props.name来获取name里面…

react基础用法一(渲染元素) 如图所示最简单的变量使用方法 格式 let 变量名称 = 赋值: 渲染格式直接用 {变量名称} 就可以直接渲染到页面 如图所示第二种渲染方法 格式 const 变量名称 = <标签>内容</标签> 渲染格式 {变量名称} 即可渲染到页面展示 如图所示也可以渲染一个对象包括它的属性对应展示到页面 格式 const 对象名称 = { key : value } 多个对象属性需要{ key1 : value1, key2 : value2 }用逗号分隔…

讲述一下React: 1.声明式设计-React采用声明范式,可以轻松描述应用 2.高效-React通过DOM模型,最大限度的减少dom的交互 3.灵活-React可以与已知的库或框架很好的配合 4.jsx-jsx是javascript语法的扩展.react开发不一定使用jsx,但我们建议使用它 5.组件-通过react构建组件,使得代码更容易得到复用,能够很好的应用在大型项目的开发中 6.单向响应的数据流-react实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单…

组件 & Props & 生命周期 组件可以将UI切分成一些独立的.可复用的部件,这样你就只需专注于构建每一个单独的部件. 组件从概念上看就像是函数,它可以接收任意的输入值(称之为“props”),并返回一个需要在页面上展示的React元素. 组件好处: 1. 高内聚  2. 自定义标签  3.作用域独立  4. 规范化接口  5. 可相互组合 定义组件的方式:函数定义/类定义组件 函数:轻    没有状态     没有生命周期 类:重     有状态        有周期 定义一个组件最…

组件的状态(this.state): 组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取 <script type="text/babel"> var Myfirst = React.createClass({ getInitialState : functi…

这里只是对自己的学习进行一次总结,也是为了让自己以后如果长时间不使用快速记忆起来的笔记,如果想要学习,还是去官网看文档比较好一些.. 注意 下面的代码的 script标签的type类型都为 “text/babel” 目录 一.无状态组件 二.函数式声明 三.this以及事件对象 四.操作dom元素 五.父子组件传值 六.在浏览器中支持import export 一. 无状态的组件 只是普通的变量是没有状态的, 只有组件才有状态或无状态 react是单向数据流 状态其实就是让数据驱动视图的响应式数…

生命周期mount: mounting装载创建 update更新 unmounting卸载 错误捕获 注意点:生命周期函数的 作用,什么之后用 只有类式组件有生命周期,函数式组件没有生命周期 mounting装载创建:—— Construct——只执行一次 作用:初始化实例 static getDerivedStateFromProps(prop,state) 有返回值,当返回值为null时,state不变:有值时,将返回对象中的属性和state的属性对应,并将state做相应修改: 作用:在r…

用到 webpack-dev-server  先安装,注意 装到全局 还是本项目我也没注意  因为之前一直报错,有很小可能是安装到本地解决了,或者是我网络问题: 装到全局:$ npm install webpack-dev-server -g 装到本地: $ npm install webpack-dev-server --save-dev 修改配置文件   图片有说明: 执行命令 直接打包,无需刷新浏览器  自动刷新代码(局部刷新): $ webpack-dev-server --port 3…

官网地址:http://plugins.krajee.com/ 官网提供的样例:http://plugins.krajee.com/file-input/demo 基础用法一 导入核心CSS及JS文件 <!--1.bootstrap.min.css 2.fileinput.min.css 3.jquery-3.2.1.min.js 4.bootstrap.min.js 5.fileinput.min.js 6.fileinput_locale_zh.js(可选择)--> <link re…

一.前言 在组件方面react和Vue一样的,核心思想玩的就是组件,下面举两个组件常用的情景. 场景一:假如我们现在有一个页面包含表格以及多个弹框,这种时候如果将这个页面的业务代码写在一个组件中,那么这一块的代码会看着非常恶心.如果这个时候我们将这个页面的表格以及弹框这些单独的模块分别写成组件的形式,然后再在这个页面中将这些组件引入进来,那样我们的代码会看着非常整洁.这样做会需要使用到父子组件之间的通信,下面会详细解释. 场景二:日常项目中我们会经常遇到某一个功能会在不同地方使用,但是每次使用的…