React
Super_LD
来非有意去无心,流水闲云自在行~
展开
-
React第一个组件(不同方式)
方式一:类方式(推荐),在项目src下面创建一个HelloReact.js,内容如下:然后在App.js中引入HelloReact组件,方式如下: 启动项目,npm start,界面展示红色框中的内容:方式二:函数方式(不推荐),在项目src下创建Person.js然后在App.js中引入Person.js,如下图:<Person /><Person></Pers...原创 2018-06-11 11:43:31 · 195 阅读 · 0 评论 -
JSX基本语法(React )
原创 2018-06-16 22:11:22 · 216 阅读 · 0 评论 -
React 组件生命周期详解
Ract生命周期React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁一、初始化1、getDefaultProps()设置默认的props,也可以用dufaultProps设置组件的默认属性.2、getInitialState()在使用es6的class语法时是没有这个钩子函数的,可以直接在constructor中定义this.state。此时可以访问this.propsconstru...转载 2018-06-23 21:10:40 · 334 阅读 · 0 评论 -
React创建组件的三种方式及其区别
React创建组件的三种方式及其区别React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归;具体的三种方式:函数式定义的无状态组件es5原生方式React.createClass定义的有状态组件组件 (不推荐使用)es6形式的extends React.Component定义的有状态组件组件 虽然有三种方式可以定义react的组件,那么这三种定义组件方式有什么不同呢?或者...转载 2018-06-23 17:45:05 · 215 阅读 · 0 评论 -
安装React
React 可以直接下载使用,下载包中也提供了很多学习的实例。本教程使用了 React 的版本为 15.4.2,你可以在官网 http://facebook.github.io/react/ 下载最新版。你也可以直接使用 BootCDN 的 React CDN 库,地址如下:<script src="https://cdn.bootcss.com/react/15.4.2/react.min...转载 2018-06-07 00:16:21 · 411 阅读 · 0 评论 -
React 第一个实例
React 教程React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。React 特点1.声明式设计 −Rea...转载 2018-06-04 22:52:09 · 810 阅读 · 0 评论 -
React-双向数据绑定
1、在Person.js中添加如下代码:2、在App.js中按照如下步骤,添加代码3、页面展示为:4、变更输入框内容,页面展示:原创 2018-06-11 18:02:47 · 387 阅读 · 0 评论 -
React-属性传值(传事件)
1、如下图在App.js中,使用红色框内方式,将myClick属性设置为changeName,并设置参数在Person.js中,在h2元素的click事件使用{props.myClick}获取组件传递过来的事件没有触发h2元素绑定的事件之前,页面展示:触发h2元素绑定的事件之后:因为触发了changeName事件,其中person的name是传入的"通过传递事件触发",count是通过setSta...原创 2018-06-11 17:26:05 · 1184 阅读 · 0 评论 -
React组件通信(state方式)
在App.js中,按如下图步骤添加对应代码,第一步:设置state属性第二步:使用state属性替换元素属性;并在button元素上绑定click事件第三步:实现changeName方法,通过setState改变属性值。点击button按钮前页面展示:点击button按钮后展示:...原创 2018-06-11 13:07:56 · 305 阅读 · 0 评论 -
React组件通信(属性传值)
在<Person>组件中添加name和count属性以及文本内容,如下图所示:在Person.js中使用如下方式获取组件传过来的值,props形参可用其他值代替,建议使用props界面展示结果如下:...原创 2018-06-11 12:10:13 · 420 阅读 · 0 评论 -
使用 PropTypes 进行类型检 || 控制台报:TypeError: Cannot read property 'string' of undefined)
使用报错如下:从 React v15.5 开始 ,React.PropTypes 助手函数已被弃用,我们建议使用 prop-types 库 来定义contextTypes。查询官网PropTypes官网资料如下:使用 PropTypes 进行类型检查注意: 从 React v15.5 开始 ,React.PropTypes 助手函数已被弃用,我们建议使用 prop-types 库 来定义conte...原创 2018-06-17 10:57:08 · 7057 阅读 · 0 评论