React核心概念

React核心概念

JSX

JavaScript XML：本质是JS，外观像是XML

一段JSX有且只有一个根元素

元素名：html标签必须纯小写，自定义组件标签必须首字母大写

元素属性(不是attribute而是property)： 不是class而是className；不是for而是htmlFor ....

单标记元素必须 / 结束

< 会用HTML解释器执行； { 会用JS解释器来执行

return 后要么是 ( ， 要么是开始标记， 不能是空白

JSX { } 表达式

{ uname }

{ uname.toUpperCase( ) }

{ sum(1, 2) }

{ new Date().getTime( ) }

{ 2 + 3 }

{ age>18 ? '成年' : '未成年' }

Component

函数组件

function MyButton(){ return JSX }

class组件

class MyButton extends React.Component{ render(){ return JSX } }

state(组件内部的可变数据)

①创建状态数据

只能在构造方法中创建

this.state = { count: 0, age: 20 }

②绑定状态数据

<p>{ this.state.count }</p>

③修改状态数据

无效写法：this.state.count = 2

正确写法：this.setState({ count: 2 }, ()=>{})

setState()会检查数据，修改虚拟DOM树，故此方法是异步

props(父组件传递给子组件的只读数据)

PARENT： <Child labelTxt={this.state.txt} inputId="uname" doInput={this.doInputChange}/>

CHILD： <label>{this.props.labelTxt}</label> <input onChange={()=>this.props.doInput(....)}/>

父子间数据传递

父=>子： Props Down

子=>父： Props Up

兄弟间数据数据

只能转换为： 子=>父=>子

this.props.children

class MyBox extends Component{ render(){ return ( <div> <h1>我的盒子</h1> { this.props.children } </div> ) } }

PARENT: <MyBox> <p>XXX</p>..... </MyBox>

ref & refs(父组件直接引用子组件)

PARENT: <Child ref="myc02"/>

PARENT: this.refs.myc02

受控组件

专指React渲染出来的表单元素：input、select、textarea

一旦value、 checked、 selected属性赋值为常量，用户无法再修改其值

如果想让用户改变value、checked、selected的值，必须绑定状态数据{ this.state.xxx }

必须监听表单元素的onChange事件，其中可以对输入数据进行过滤，最终保存为状态数据this.setState({})

组件的生命周期钩子函数

componentDidMount( )

适用于组件加载完成执行数据获取操作

componentWillUnmount( )

适用于执行收尾/回收操作：如定时器

面试题：前端可用的异步请求技术

原生XHR

RN支持

jQuery.ajax( )

RN不支持

Axios

RN支持

HttpClient

RN不支持

fetch

RN支持

fetch( url, {method:'POST'} ) .then( (res)=>{ return res.json() } ) .then( (result)=>{ } )

(重点)ReactNative

概述：是一个基于React的原生App开发框架，语法使用了JS，但因为不是WebView方案，不支持任何的HTML/CSS技术

开发平台搭建

服务器端

npm i -g react-native-cli

react-native init 项目

cd 项目

npm start

移动端APP

物理/虚拟设备安装APP

配置服务器的IP和端口

启动App，自动连接服务器，下载最新内容

RN常用组件

<Text style={} numberOfLines={3} ellipsizeMode="tail">....</Text>

<View style={{flex: 1, flexDirection="column" alignItems="center" justifyContents="space-around"}}></View>

<ScrollView style={} horizontal={false}></ScrollView>

<Button title="" color="" onPress={}/>

<Image/>

本地图片

<Image source={require('../assets/logo.png')}/>

webpack默认不会对.ico图片打包

远程图片

<Image source={{uri: 'http://www.codeboy.com/img/md/1234.jpg'}} style={{width: xx, height: xx}} resizeMode="cover/contain/stretch/repeat/center"/>

注意：远程图片必须提前指定宽和高

<ImageBackgroud source={require('...')} style={{width: '100%', height: '100%'}}/>

<TextInput /> 典型的受控元素

constructor(){ super() this.state = { age: '' } }

<TextInput value={this.state.age}/>

<TextInput value={this.state.age} onChangeText={this._onChangeText}/>

属性

value

onChangeText

keyboardType

键盘类型

multiline

numberOfLines

placeholder

secureTextEntry

是否启用安全文本输入，类似于<input type="password">

<Switch /> 典型的受控元素

constructor(){ super() this.state = { keepOn: true } }

<Switch value={this.state.keepOn}/>

<Switch value={this.state.keepOn} onValueChange={this._onValueChange}/>

<TouchableOpacity onPress={} onLongPress={}> </TouchableOpacity>

<TouchableHightlight></TouchableHightlight>

<FlatList data={[]} renderItem={this._renderItem keyExtractor={(item, index)=>index+""} ListHeaderComponent={} ListFooterComponent={} ItemSeperatorComponent={} }></FlatList>

<SectionList></SectionList>

布局系统(FlexBox)

flex: 1

提示：<View>默认高度随内容改变而改变，若想撑满父元素只需要<View style={{flex: 1}}>

flexDirection: 'column|row'

alignItems: 'flex-start | end | center'

justifyContent: 'flex-start | end | center | space-evenly | space-around | space-between'

路由和导航

注意：RN没有DOM&BOM，没有window.history、window.location支持！RN中的跳转不是基于超链接和URL的！

React和ReactNative官方都没有提供路由组件，推荐使用第三方路由组件：React-Navigation

ReactNaviagtion使用步骤

①引入必需的依赖模块

看手册......

②创建路由词典(App.js)

let routes = createStackNavigator({ login: LoginComponent, main: MainComponent })

③注册路由词典(App.js)

export default createAppContainer( routes )

返回一个带默认标题栏的空白组件

④页面跳转

路由组件都会获得一个属性：this.props.navigation

this.props.navigation.navigate('main')

this.props.navigation.goBack()

⑤跳转传参

页面1：this.props.navigation.navigate('page2', { pid:20, uname:'ding', age:15})

页面2：let pid = this.props.navigation.getParam('pid', 18)

⑥页面标题栏

static navigationOptions = { title: '标题文字', headerTitle: (<Image/>), headerRight: (<Button onPress={ ()=>this.props.navigation.navigate('....') }/>) }

错误写法！静态成员中禁止访问实例属性/变量，如this

static navigationOptions = ((navigation)=>{ return { title: navigation.getParam('标题'), headerRight: (<Button onPress={()=>navigation.navigate('...')}/>) } })

RN对手：Google Dart/Flutter