react 的五脏六腑ing~
用react一年多了.一直是在别人的影子下写的代码,他们也确实都是大神级的人物,不过,小菜鸟也有小菜鸟的思想~这不,今天就在重温一遍react!记一些零碎的知识点~不知道对你们有没有用,不过,对于我,绝对有用!所有的这些均参考于http://www.ruanyifeng.com/blog/2015/03/react.html
react官方文档 https://facebook.github.io/react/docs/events.html#supported-events
1 var names = ['fr','de']
ReactDOM.render(
(1)<h1 id='h1'>你好,学长</h1>
document.getElementById('h1')
(2)<div>
{
names.map(function(name){
return <div>Hello {name} </div>
})
}
</div>
document.getElementById('h1')
)
ReactDom.render是React的基本语法,用处:将模板转为HTML,并插入指定的DOM节点
react的特有语法:JSX 上例允许HTML和JavaScript混写
JSX的基本语法规则:1 遇到HTML标签用<>开头,会用HTML规则解析,遇到代码块用{}开头,会以javaScript解析
组件:React允许将代码封装成组件,然后向插入普通HTML标签一样,在网页中插入这个组件,React.createClass用于生成一个组件类,而且组件类只能一个顶层标签
这个就是错的,因为他有两个标签 ,应该在最外边包含一个<div>标签
组件的用法于HTML标签用法一致,组件的属性可以用this.props对象获取,有一点需要注意:他的class和for属性需要变成className和htmlFor,因为class和for是JavaScript的保留字
this.props的属性与组件的属性一一对应,但this.props.children代表组件的所有子节点,this.props.children有三种可能性,若没子节点,则表示undefind,有一个子节点则表示object,若为多个子节点,则为array,react提供了一个工具方法来处理this.props.children, 就是React.Children.map()来遍历子节点
PropTypes属性:验证组件实例的属性是否满足要求
getDefaultProps方法:用来设置属性的默认值
获取真实的DOM节点:利用this.refs.[refName]
this.state和this.props都是描述组件的特性,区别在于:this.state指的是可以改变的特性,而this.props指的是一旦定义就不在改变的特性
react 的五脏六腑ing~的更多相关文章
- 谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo
前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...
- React入门 (1)—使用指南(包括ES5和ES6对比)
前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
- 技能get,React的优雅升级!
今日,我们不啖鸡汤,不饮鸡血 只有干货——关于React的优雅升级 双手奉上,来,干了! -2019年第4期- 夫 子 说 本次升级基础包情况:react 15.6 -> 16.6 升级流程: ...
- React Native导航器之react-navigation使用
在上一节Navigation组件,我们使用系统提供的导航组件做了一个跳转的例子,不过其实战能力不强,这里推荐一个超牛逼的第三方库:react-navigation.在讲react-navigation ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- 【React】354- 一文吃透 React 事件机制原理
大纲 主要分为4大块儿,主要是结合源码对 react事件机制的原理 进行分析,希望可以让你对 react事件机制有更清晰的认识和理解. 当然肯定会存在一些表述不清或者理解不够标准的地方,还请各位大神. ...
- React Native商城项目实战14 - 首页中间下部分
1.MiddleBottomView.js /** * 首页中间下部分 */ import React, { Component } from 'react'; import { AppRegistr ...
- 富文本编辑器之游戏角色升级ing
一.前言 想必大家看到这个标题,心中不禁会浮现几个问题: 什么是富文本编辑器? 富文本编辑器和游戏角色有什么关系? 为什么是升级ing? 什么是富文本编辑器--富文本编辑器集成了格式设置.媒体嵌入.社 ...
- react组件的生命周期
写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...
随机推荐
- Nature:新发现挑战神经元作用传统理论 [转自科学网]
美德科学家独立进行的两项最新研究表明,单个神经元的激发就足以影响学习和行为.这一结论挑战了人们长期以来的认识,即数千个神经元的有序排列才能够产生一个行为反应.这两篇论文12月19日在线发表于<自 ...
- 自动生成数学题型一 (框架Struts2) 题型如(a+b=c)
1. 加减乘除 1.1 随机生成制定范围的整数 /** * 随机产生一个被限定范围的整数 * * @param num1 * 定义起始范围 num1 * @param num2 * 定义终止范围 nu ...
- .Net Core的一些个人总结
从开始接触.Net Core到现在已经有将近一年的时间了,今天来做一下相关的学习总结,顺便也回忆一下自己这段时间以来的成长. 有一点不得不承认的是,在接触.Net Core之前,我对于linux系统一 ...
- zabbix主动上报的python脚本
本代码linux.window平台通用. 不过我遇到一个Windows2008缺少运行库的提示,可能这个是Python3.6开发的.需要安装vc2015运行库吧.我没调试成功. linux平台还可以监 ...
- DirectFB学习笔记四
本篇目的,实现按钮的点击事件捕获,也就是鼠标点击,如果点击在方框范围内,则响应,在方框外,则忽略. 由于鼠标移动和点击都会产生事件,因此,我们可以在鼠标移动的时候记录坐标,在点击时比较坐标是否在方框范 ...
- JQuery 根据ID在页面中定位
1.锚点跳转简介 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+name属性:还 ...
- 蓝桥杯-等额本金-java
/* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...
- 详解全站 HTTPS 访问优化
HTTPS 协议就是 HTTP+SSL/TLS,即在 HTTP 基础上加入 SSL /TLS 层,提供了内容加密.身份认证和数据完整性3大功能,目的就是为了加密数据,用于安全的数据传输. HTTPS ...
- 用户交互式命令:read
read命令从键盘读取变量的值,通常用在shell脚本中与用户进行交互的场合.该命令可以一次读取多个变量的值,变量和输入的值都需要使用空格隔开. 语法 read [option]... [name . ...
- 微软 Build 2017 开发者大会:Azure 与 AI 的快速发展
欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~ 一年一度的微软 Build 大会准时起航,本年度大会从旧金山移师西雅图,一个近年来凭借女神汤唯而在中国家喻户晓的美国西部海滨城市 ...