
React
往前的
这个作者很懒,什么都没留下…
展开
-
React----List(集合)和Key(键)
概述:React有list集合,跟js有点类似,涉及map就需要key,key在相同的层级唯一(兄弟之间)1.直接上例子:function Books(){ const books=['西游记','红楼梦','三国演义','水浒传']; const listItems = books.map((book) => {book} ); r原创 2017-06-04 17:42:50 · 8815 阅读 · 0 评论 -
React--事件处理
概述:React是整合HTML 和js混血儿,处理事件和DOM处理事件大致相同,只有的一些语法的差异 主要分两点:React 事件跟java的驼峰命名法,而DOM事件是小写JSX对于处理函数是引用也就是({}花括号括起来的),而DOM是字符串(“” 双引号或单引号)JSX对于字符串和函数引用进行区分JSX不能直接返回false去改变默认行为,必须显式调用preve原创 2017-06-03 19:18:04 · 370 阅读 · 0 评论 -
React---状态和生命周期
概述React利用状态来更新UI1.还记得前一章讲过利用setInterval函数实现实时钟效果function tick(){ const element=( 时间:{new Date().toLocaleTimeString()} ); ReactDOM.render( element, document.getElementBy原创 2017-06-02 23:45:57 · 1643 阅读 · 0 评论 -
Component 抽象和重复利用
function formatDate(date) { return date.toLocaleDateString();}function Comment(props) { return ( <img className="Avatar" src={props.author.avatarUrl}原创 2017-06-02 21:27:24 · 700 阅读 · 0 评论 -
React-----Composition(构造)VS Inheritance(继承)
概述:我们该如何选择是构造还是继承。1.包含对于对话框和工具栏不确定它包含的内容,可用children进行注入代码:function FancyBorder(props) { return ( {props.children} );}function WelcomeDialog() { return (原创 2017-06-05 21:23:49 · 729 阅读 · 0 评论 -
React-----温度转换案例分析React的思想
概述:以温度转换为例,分析React的封装思想和抽象1.上效果图功能介绍:无论在哪个输入框进行输入,另个框值会动态改变,同时下面的文本也会跟着改变(Celsius>100 水开始沸腾了,反之)2.分析:React的目标:封装Component进行复用抽离相同点:1.上面两个大框框起来是相同的结构,都是一个名称和输入框抽离不同点:1.名称后面单词是不同2.隐含两个原创 2017-06-05 20:32:59 · 1041 阅读 · 0 评论 -
React-Component(组件)
概述:前面说了元素,元素组合起来就是组件,如果学过EasyUI你会发现有很多已经定义好的组件例如手风琴,树形表格等等,组件的目的是为复用。原创 2017-05-31 22:48:00 · 2560 阅读 · 0 评论 -
React对象表现形式以及其它特性
1.html标签对象表现形式。//形式1const e = ( hello world );//形式2const r = React.createElement( 'h1', {className:'dd'}, 'hello world');//形式3const element = { type: 'h1', props: { cla原创 2017-05-31 21:40:26 · 848 阅读 · 0 评论 -
React - JSX- 之if逻辑判断
1.React就是JS也就是它可以进行逻辑判断,例如循环或if,这里主要是if语句2.html还是简单的div标签3.React代码:原创 2017-05-31 21:10:46 · 4342 阅读 · 0 评论 -
React-JSX-常量定义与使用
1.前面讲了HelloWorld注意事项,现在讲解JSX的常量的定义与使用2.网页部分:3.关键看React部分(也就是JSX)//user是定义数据const user = { firstName:"陈亮", secondName:'哈哈'};//格式化数据function formatName(user){ return user.firstName+原创 2017-05-31 20:38:02 · 10088 阅读 · 1 评论 -
React之HelloWorld!
1.React主要对JavaScript进行再封装,模块化,为重复利用。核心语法就是JSX,正入话题2.编辑环境可以本地也可以是在线版(https://codepen.io/gaearon/pen/ZpvBNJ)点击打开链接 (为了方便直接采用在线版)3.从HelloWorld开始ReactDOM.render( Hello World, document.ge原创 2017-05-31 20:23:34 · 559 阅读 · 1 评论 -
React-----form(表单)
概述:React表单和html表单的区别就是,前者分工明确,后者html似乎夹杂着其它功能(本来觉得有js处理的提交功能)1.html下表单 Name: 2.React的表单class NameForm extends React.Component { constructor(props) { super(props); t原创 2017-06-05 07:53:06 · 445 阅读 · 0 评论 -
React-(if)条件渲染-condition
概述:在React中,你封装很多基础组件,但是你是有选择使用特定的组件,这时候就需要依赖应用的状态,类似javaScript中if1.例子://定义基础组件function Orange(){ return 我喜欢橘子}function Apple(){ return 我喜欢苹果}//进行选择function GetFavor(props){ const fa原创 2017-06-04 12:50:06 · 27670 阅读 · 0 评论