React基础语法学习

React主要有如下3个特点：

  • 作为UI（Just the UI）
  • 虚拟DOM（Virtual DOM）:这是亮点 是React最重要的一个特性 放进内存 最小更新的视图,差异部分更新 diff算法
  • 数据流（Date Flow）单向数据流

学习React需要掌握哪些知识？

  • JSX语法 类似XML
  • ES6相关知识
  • 前端基础 CSS+DIV JS

例子一
（简单组件和数据传递） 使用this.props 指向自己的属性

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>React第一个例子</title><script type="text/javascript" src="react.js"></script><script type="text/javascript" src="react-dom.js"></script><script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">var HelloMessage=React.createClass({render:function(){return <h1 style={{color:'#ff0000',fontSize:'24px'}} >Hello {this.props.name}!我是东方耀</h1>;//这是注释  React.createElement}});ReactDOM.render(<HelloMessage name="React 语法基础8" /> ,document.getElementById('example'));</script>
</body>
</html>

例子二（通过this.state更新视图） 

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>React第二个例子</title><script type="text/javascript" src="react.js"></script><script type="text/javascript" src="react-dom.js"></script><script type="text/javascript" src="browser.min.js"></script>
</head>
<body><div id="example"></div><script type="text/babel">var Timer=React.createClass({/*初始状态*/getInitialState:function(){return {secondsElapsed:0};},tick:function(){this.setState({secondsElapsed:this.state.secondsElapsed+1});},/*组件完成装载*/componentDidMount:function(){this.interval=setInterval(this.tick,1000);},/*组件将被卸载   清除定时器*/componentWillUnmount:function(){clearInterval(this.interval);},/*渲染视图*/render:function(){return(<div> Seconds Elapsed:{this.state.secondsElapsed} </div>);}});React.render( <Timer /> ,document.getElementById('example'));</script></body>
</html>

例子三（简单应用） 

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>React第三个例子</title><script type="text/javascript" src="react.js"></script><script type="text/javascript" src="react-dom.js"></script><script type="text/javascript" src="browser.min.js"></script>
</head>
<body><div id="example"></div><script type="text/babel">var ShowEditor=React.createClass({getInitialState:function(){return {value:'你可以在这里输入文字'};},handleChange:function(){this.setState({value:React.findDOMNode(this.refs.textarea).value});},render:function(){return (<div><h3>输入</h3><textarea style={{width:300,height:150,outline:'none'}}onChange={this.handleChange}ref="textarea"defaultValue={this.state.value}/><h3>输出</h3><div> {this.state.value} </div></div>);}});React.render(<ShowEditor />,document.getElementById('example'));</script></body>
</html>

flexbox布局

伸缩项目的属性

1.order
定义项目的排列顺序，数值越小，排列越靠前，默认值为0，语法为：order：整数值
2.flex-grow
定义伸缩项目的放大比例，默认值为0，即表示如果存在剩余空间，也不放大，语法为：flex-grow：整
数值
3.flex-shrink
定义伸缩项目的收缩能力，默认值为1 ，其语法为：flex-shrink:整数值
4.flex-basis
用来设置伸缩项目的基准值，剩余的空间按比率进行伸缩，其语法为：flex-basis:length | auto，默认
值为auto
5.flex
是flex-grow flex-shrink flex-basis这三个属性的缩写，其语法为：flex:none | flex-grow flex-shrink flexbasis，
其中第二个和第三个参数为可选参数，默认值为：0 1 auto
6.align-self
用来设置单独的伸缩项目在交叉轴上的对齐方式，会覆盖默认的对齐方式，其语法为：align-self:auto
| flex-start | flex-end | center | baseline | stretch(伸缩项目在交叉轴方向占满伸缩容器，如果交叉轴为
垂直方向的话，只有在不设置高度的情况下才能看到效果)

在React Native中使用flexbox

RN目前主要支持flexbox的如下6个属性：
1.alignItems
用来定义伸缩项目在交叉轴上的对齐方式，语法为： alignItems:flex-start（默认值） | flex-end |
center | stretch
2.alignSelf
用来设置单独的伸缩项目在交叉轴上的对齐方式，会覆盖默认的对齐方式，其语法为：alignSelf:auto |
flex-start | flex-end | center | stretch(伸缩项目在交叉轴方向占满伸缩容器，如果交叉轴为垂直方向的
话，只有在不设置高度的情况下才能看到效果)
3.flex
是flex-grow flex-shrink flex-basis这三个属性的缩写，其语法为：flex:none | flex-grow flex-shrink flexbasis，
其中第二个和第三个参数为可选参数，默认值为：0 1 auto
4.flexDirection
指定主轴的方向 flex-direction:row| row-reverse | column（默认值） | column-reverse
5.flexWrap
6.justifyContent

BOX实现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.height50 {height: 50px;}.height400 {height: 400px;}.height300 {height: 300px;}.height200 {height: 200px;}.height100 {height: 100px;}.width400 {width: 400px;}.bgred {background-color: #6AC5AC;}.bggreen {background-color:  #414142;}.bgyellow {background-color: #D64078;}.box {display: flex;flex-direction: column;flex: 1;position: relative;color: #FDC72F;line-height: 1em;}.label {top: 0;left: 0;padding: 0 3px 3px 0;position: absolute;background-color: #FDC72F;color: white;line-height: 1em;}.top {width: 100%;justify-content: center;display: flex;align-items: center;}.bottom {width: 100%;display: flex;justify-content: center;align-items: center;}.right {width: 50px;display: flex;justify-content: space-around;align-items: center;}.left {width: 50px;display: flex;justify-content: space-around;align-items: center;}.heightdashed {position: absolute;right: 20px;height: 100%;border-left: 1px solid #FDC72F;}.widthdashed {position: absolute;left: 0px;width: 100%;bottom: 24px;border-top: 1px solid #FDC72F;}.margginBox {position:absolute;top: 100px;padding-left:7px;padding-right:7px;}.borderBox {flex: 1;display: flex;justify-content: space-between;}.paddingBox {flex: 1;display: flex;justify-content: space-between;}.elementBox{flex: 1;display: flex;justify-content: space-between;}.measureBox {flex: 1;display: flex;justify-content: flex-end;align-items: flex-end;}</style></head><body><span class="margginBox"><span class="box height400  width400"><span class="label">margin</span><span class="top height50 bgred">top</span><span class="borderBox"><span class="left bgred">left</span><span class="box height300  "><span class="label">border</span><span class="top height50 bggreen">top</span><span class="paddingBox"><span class="left bggreen">left</span><span class="box height200  "><span class="label">padding</span><span class="top height50 bgyellow">top</span><span class="elementBox"><span class="left bgyellow">left</span><span class="box height100  "><span class="label">element</span><span class="widthdashed"></span><span class="heightdashed"></span><span class="measureBox"><span class="right">height</span></span><span class="bottom  height50">width</span></span><span class="right bgyellow">right</span></span><span class="bottom  height50 bgyellow">bottom</span></span><span class="right bggreen">right</span></span><span class="bottom  height50 bggreen">bottom</span></span><span class="right bgred">right</span></span><span class="bottom  height50 bgred">bottom</span></span></span></body>
</html>

效果如下

这里写图片描述

ReactNative版实现 

/*** Sample React Native App* https://github.com/facebook/react-native*/
'use strict';
import React, {AppRegistry,Component,StyleSheet,Text,View
} from 'react-native';class DongFang extends Component {render() {return (<View style={[BoxStyles.margginBox]}  ref="lab1"><View style={[BoxStyles.box,BoxStyles.height400,BoxStyles.width400]}><View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bgred]}><Text style={BoxStyles.yellow}>top</Text></View><View style={[BoxStyles.borderBox]}><View style={[BoxStyles.left,BoxStyles.bgred]} ><Text style={BoxStyles.yellow}>left</Text></View><View style={[BoxStyles.box,BoxStyles.height300]}><View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bggreen]}><Text style={BoxStyles.yellow}>top</Text></View><View style={[BoxStyles.paddingBox]}><View style={[BoxStyles.left,BoxStyles.bggreen]} ><Text style={BoxStyles.yellow}>left</Text></View><View style={[BoxStyles.box,BoxStyles.height200]}><View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bgyellow]}><Text style={BoxStyles.yellow}>top</Text></View><View style={[BoxStyles.elementBox]}><View style={[BoxStyles.left,BoxStyles.bgyellow]} ><Text style={BoxStyles.yellow}>left</Text></View><View style={[BoxStyles.box,BoxStyles.height100]}><View  style={[BoxStyles.label]}><Text style={BoxStyles.white}>element</Text></View><View style={[BoxStyles.widthdashed]} ></View><View style={[BoxStyles.heightdashed]} ></View><View style={[BoxStyles.measureBox]} ><View style={[BoxStyles.right]}><Text style={[BoxStyles.yellow]}>height</Text></View></View><View style={[BoxStyles.bottom,BoxStyles.height50]}><Text style={BoxStyles.yellow}>width</Text></View></View><View style={[BoxStyles.right,BoxStyles.bgyellow]}><Text style={BoxStyles.yellow}>right</Text></View></View><View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bgyellow]}><Text style={BoxStyles.yellow}>bottom</Text></View><View style={[BoxStyles.label]}><Text style={BoxStyles.white}>padding</Text></View></View><View style={[BoxStyles.right,BoxStyles.bggreen]}><Text style={BoxStyles.yellow}>right</Text></View></View><View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bggreen]}><Text style={BoxStyles.yellow}>bottom</Text></View><View style={[BoxStyles.label]}><Text style={BoxStyles.white}>border</Text></View></View><View style={[BoxStyles.right,BoxStyles.bgred]}><Text style={BoxStyles.yellow}>right</Text></View></View><View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bgred]}><Text style={BoxStyles.yellow}>bottom</Text></View><View style={[BoxStyles.label]} ><Text style={BoxStyles.white}>margin</Text></View></View></View>);}
}const BoxStyles = StyleSheet.create({height50:{height: 50,},height400:{height: 400,},height300:{height: 300,},height200:{height: 200,},height100:{height: 100,},width400:{width: 400,},width300:{width: 300,},width200:{width: 200,},width100:{width: 100,},bgred: {backgroundColor:'#6AC5AC',},bggreen: {backgroundColor: '#414142',},bgyellow: {backgroundColor: '#D64078',},box: {flexDirection: 'column',flex: 1,position: 'relative',},label: {top: 0,left: 0,paddingTop: 0,paddingRight: 3,paddingBottom: 3,paddingLeft: 0,position: 'absolute',backgroundColor: '#FDC72F',},top: {justifyContent: 'center',alignItems: 'center',},bottom: {justifyContent: 'center',alignItems: 'center',},right: {width: 50,justifyContent: 'space-around',alignItems: 'center',},left: {width: 50,justifyContent: 'space-around',alignItems: 'center',},heightdashed: {bottom: 0,top: 0,right: 20,borderLeftWidth: 1,position: 'absolute',borderLeftColor: '#FDC72F',},widthdashed: {bottom: 25,left: 0,right: 0,borderTopWidth: 1,position: 'absolute',borderTopColor: '#FDC72F',},yellow: {color: '#FDC72F',fontWeight:'900',},white: {color: 'white',fontWeight:'900',},margginBox:{position: 'absolute',top: 100,paddingLeft:7,paddingRight:7,},borderBox:{flex: 1,justifyContent: 'space-between',flexDirection: 'row',},paddingBox:{flex: 1,justifyContent: 'space-between',flexDirection: 'row',},elementBox:{flex: 1,justifyContent: 'space-between',flexDirection: 'row',},measureBox:{flex: 1,flexDirection: 'row',justifyContent: 'flex-end',alignItems:'flex-end',},container: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: {fontSize: 20,textAlign: 'center',margin: 10,},instructions: {textAlign: 'center',color: '#333333',marginBottom: 5,},
});AppRegistry.registerComponent('DongFang', () => DongFang);

这里写图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/493994.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C#中ListT用法

C#中ListT用法

所属命名空间&#xff1a;System.Collections.Generic public classList<T> :IList<T>,ICollection<T>,IEnumerable<T>,IList,ICollection,IEnumerable List<T>类是ArrayList类的泛型等效类。该类使用大小可按需动态增加的数组实现IList<…
阅读更多...
算力超英伟达？华为推出两款“昇腾”芯片；五大AI战略正式公布

算力超英伟达？华为推出两款“昇腾”芯片；五大AI战略正式公布

来源&#xff1a;AI科技大本营华为也像是要 All in AI 了。10 月 10 日&#xff0c;华为全联接大会 2018 上&#xff0c;华为轮值董事长徐直军带来了一系列的硬核 AI。在大会上&#xff0c;他系统公布了华为的 AI 发展战略&#xff0c;以及全栈全场景 AI 解决方案&#xff0c;其…
阅读更多...
Qt5：渐变效果的实现

Qt5：渐变效果的实现

http://devbean.blog.51cto.com/448512/238168/ 转载于:https://www.cnblogs.com/wowk/p/3174602.html
阅读更多...
React之JSX入门

React之JSX入门

React是由ReactJS与React Native组成&#xff0c;其中ReactJS是Facebook开源的一个前端框架&#xff0c;React Native 是ReactJS思想在native上的体现&#xff01; JSX并不是一门新的语言&#xff0c;仅仅是个语法糖&#xff0c;允许开发者在JavaScript中书写HTML语法。&…
阅读更多...
英特尔人工智能副总裁：AI不是一种技能，而是一种对于工作的描述

英特尔人工智能副总裁：AI不是一种技能，而是一种对于工作的描述

来源&#xff1a;网络大数据人工智能领域的迅速发展&#xff0c;相关人才不能满足需求已经成为业界共识。有报道称&#xff0c;因为人工智能工程师庞大的缺口&#xff0c;一些公司为了获得人才不得不支付数百万美元的薪水。如何满足对人工智能工程师不断增长的招聘和培训的需求…
阅读更多...
html 中表格长度固定

html 中表格长度固定

2010-02-03 14:25 1070人阅读 评论(0) 收藏 举报htmlclassxhtml产品bordertable<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns"http://www.w3.org/1999/xht…
阅读更多...
React Native实例

React Native实例

本文主要包括以下内容 View组件的实例 Text组件实例 Navigator组件实例 TextInput组件实例 View组件的实例 效果如下 代码如下 /*** Sample React Native App* https://github.com/facebook/react-native* flow*/import React, { Component } from react; import {AppRe…
阅读更多...
谷歌的硬件梦：Pixel手机、ChromeOS平板和Home音箱

谷歌的硬件梦：Pixel手机、ChromeOS平板和Home音箱

来源&#xff1a; 网易智能&#xff08;北京时间10月9日23点&#xff09;&#xff0c;谷歌在纽约如期举行了主题为“谷歌制造”&#xff08;Made By Google&#xff09;的硬件发布会&#xff0c;推出了Pixel手机、平板 笔记本&#xff0c;以及音箱等一系列新品硬件。一个月以来…
阅读更多...
浅用block 转

浅用block 转

block是一门有用的大后期学问。现在我只是列出一点基本用法。 1.快速枚举&#xff08;Enumeration&#xff09; 通常是和NSArray, NSDictionary, NSSet, NSIndexSet放在一起用。 当和以上这两种东西放在一起用时&#xff0c;通常block有两种用处。&#xff08;代码为实例操作&a…
阅读更多...
数据结构之图的实现

数据结构之图的实现

本文主要包括以下内容 邻接矩阵实现无向图 邻接表实现无向图 邻接矩阵实现有向图邻接表实现有向图 图的理论基础&#xff0c;请参考&#xff1a;图的理论基础 - 如果天空不死 - 博客园 邻接矩阵实现无向图 MatrixUDG是邻接矩阵对应的结构体。 mVexs用于保存顶点&#xf…
阅读更多...
“万维网之父”发文阐述其下一个网络时代：将数据与应用分离，互联网去中心化正在路上...

“万维网之父”发文阐述其下一个网络时代：将数据与应用分离，互联网去中心化正在路上...

来源&#xff1a;Deep Tech深科技关注“万维网之父”Tim Berners-Lee 动态的人&#xff0c;一定知道这位业内大神正在投身于下一代互联网的建设——一个去中心化的互联网。他正在领导其 MIT 团队搭建一个名为“ Solid ”&#xff08;Social Linked Data 社交关联数据&#xff0…
阅读更多...
设置easyui input默认值

设置easyui input默认值

/*设置input 焦点*/ $(function () {//集体调用 $(".formTextBoxes input").each(function () {$(this).setDefauleValue();});//单个调用 $(".textkey").setDefauleValue(); })//设置input,textarea默认值 .之前写法$.fn.seDefauleValue function(){ $.f…
阅读更多...
React Native官方DEMO

React Native官方DEMO

官方给我们提供了UIExplorer项目&#xff0c;这里边包含React Native的基本所有组件的使用介绍和方法。 运行官方DEMO步骤如下 安装react native环境 React Native项目源码下载下载安装cygwin软件 下载安装NDK然后安装以及配置 添加Node依赖模块:该命令行需要切到react-nati…
阅读更多...
牛津教授揭秘AI革命及其前沿进展

牛津教授揭秘AI革命及其前沿进展

来源&#xff1a;专知导读&#xff1a;2018年9月9日-14日&#xff0c;DeepMind主办的Deep Learning Indaba 2018大会在南非斯泰伦博斯举行。会上&#xff0c;牛津大学教授Nando de Freitas和其他15位专家做了《深度学习&#xff1a;AI革命及其前沿进展》的报告。报告导读&#…
阅读更多...
【will】JS去字符串首尾空格

【will】JS去字符串首尾空格

当IE不支持Jquery的Trim()方法时&#xff0c; 就需要JS的方法&#xff1a; function mytrim(str){return str.replace(/^\s|\s$/g,"");}转载于:https://www.cnblogs.com/EMTeam/p/3181471.html
阅读更多...
数据结构之DFS与BFS实现

数据结构之DFS与BFS实现

本文主要包括以下内容 邻接矩阵实现无向图的BFS与DFS 邻接表实现无向图的BFS与DFS 理论介绍 深度优先搜索介绍 图的深度优先搜索(Depth First Search)&#xff0c;和树的先序遍历比较类似。 它的思想&#xff1a;假设初始状态是图中所有顶点均未被访问&#xff0c;则从某…
阅读更多...
一图分析华为最新AI生态与未来趋势

一图分析华为最新AI生态与未来趋势

华为全联接大会2018年10月10日在上海召开&#xff0c;作为面向ICT产业的年度大会&#xff0c;华为公布了重要AI战略&#xff0c;将华为AI发展战略概括为以下五大方向&#xff1a;强力投资基础研究、打造全栈解决方案、投资开放生态和人才培养、解决方案增强以及内部效率提升。华…
阅读更多...
SQL SERVER 与ACCESS、EXCEL的数据导入导出转换

SQL SERVER 与ACCESS、EXCEL的数据导入导出转换

* 说明&#xff1a;复制表(只复制结构,源表名&#xff1a;a 新表名&#xff1a;b) select * into b from a where 1<>1* 说明&#xff1a;拷贝表(拷贝数据,源表名&#xff1a;a 目标表名&#xff1a;b) insert into b(a, b, c) select d,e,f from b;* 说明&am…
阅读更多...
数据结构之Dijkstra算法

数据结构之Dijkstra算法

基本思想 通过Dijkstra计算图G中的最短路径时&#xff0c;需要指定起点s(即从顶点s开始计算)。 此外&#xff0c;引进两个集合S和U。S的作用是记录已求出最短路径的顶点(以及相应的最短路径长度)&#xff0c;而U则是记录还未求出最短路径的顶点(以及该顶点到起点s的距离)。 …
阅读更多...
在读博士的第八年，她破解了量子计算领域最基本的问题之一

在读博士的第八年，她破解了量子计算领域最基本的问题之一

来源&#xff1a;原理Urmila Mahadev&#xff08;厄米拉马哈德夫&#xff09;花了八年时间在研究生院解决了量子计算领域最基本的问题之一&#xff1a;怎么知道量子计算机是否做了量子计算呢&#xff1f;2017年春天&#xff0c;Urmila Mahadev发现自己处于大多数研究生都会认为…
阅读更多...
最新文章

Copyright @ 2022~2023