當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

React基础语法学习

發(fā)布時間：2024/7/23 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 React基础语法学习小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

React主要有如下3個特點：

作為UI（Just the UI）
虛擬DOM（Virtual DOM）:這是亮點是React最重要的一個特性放進內(nèi)存最小更新的視圖,差異部分更新 diff算法
數(shù)據(jù)流（Date Flow）單向數(shù)據(jù)流

學(xué)習(xí)React需要掌握哪些知識？

JSX語法類似XML
ES6相關(guān)知識
前端基礎(chǔ) CSS+DIV JS

例子一
（簡單組件和數(shù)據(jù)傳遞）使用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 語法基礎(chǔ)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({/*初始狀態(tài)*/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>

例子三（簡單應(yīng)用）

<!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
定義項目的排列順序，數(shù)值越小，排列越靠前，默認值為0，語法為：order：整數(shù)值
2.flex-grow
定義伸縮項目的放大比例，默認值為0，即表示如果存在剩余空間，也不放大，語法為：flex-grow：整
數(shù)值
3.flex-shrink
定義伸縮項目的收縮能力，默認值為1 ，其語法為：flex-shrink:整數(shù)值
4.flex-basis
用來設(shè)置伸縮項目的基準值，剩余的空間按比率進行伸縮，其語法為：flex-basis:length | auto，默認
值為auto
5.flex
是flex-grow flex-shrink flex-basis這三個屬性的縮寫，其語法為：flex:none | flex-grow flex-shrink flexbasis，
其中第二個和第三個參數(shù)為可選參數(shù)，默認值為：0 1 auto
6.align-self
用來設(shè)置單獨的伸縮項目在交叉軸上的對齊方式，會覆蓋默認的對齊方式，其語法為：align-self:auto
| flex-start | flex-end | center | baseline | stretch(伸縮項目在交叉軸方向占滿伸縮容器，如果交叉軸為
垂直方向的話，只有在不設(shè)置高度的情況下才能看到效果)

在React Native中使用flexbox

RN目前主要支持flexbox的如下6個屬性：
1.alignItems
用來定義伸縮項目在交叉軸上的對齊方式，語法為： alignItems:flex-start（默認值） | flex-end |
center | stretch
2.alignSelf
用來設(shè)置單獨的伸縮項目在交叉軸上的對齊方式，會覆蓋默認的對齊方式，其語法為：alignSelf:auto |
flex-start | flex-end | center | stretch(伸縮項目在交叉軸方向占滿伸縮容器，如果交叉軸為垂直方向的
話，只有在不設(shè)置高度的情況下才能看到效果)
3.flex
是flex-grow flex-shrink flex-basis這三個屬性的縮寫，其語法為：flex:none | flex-grow flex-shrink flexbasis，
其中第二個和第三個參數(shù)為可選參數(shù)，默認值為：0 1 auto
4.flexDirection
指定主軸的方向 flex-direction:row| row-reverse | column（默認值） | column-reverse
5.flexWrap
6.justifyContent

BOX實現(xiàn)

<!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版實現(xiàn)

/*** 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);

總結(jié)

以上是生活随笔為你收集整理的React基础语法学习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Verilog HDL语言设计4个独立的
下一篇： Keras】基于SegNet和U-Net