复习：
1.JSX中的数据绑定
内容绑定：<div>{表达式}</div>
属性绑定：<img src={表达式}/>
样式绑定：<div className={表达式} style={样式对象}></div>
事件绑定：<button onClick={函数} onClick={()=>函数(参数)}></button>
双向数据绑定：
受控组件：<input value={uname} onChange={e=>setUname(e.target.value)}/>
非受控组件：
let resume = useRef( ) //reference引用
let comment = useRef( )
<input ref={resume} />
<textarea ref={comment}></textarea>
onSubmit(){ resume.current.value comment.current.value }
条件渲染：
仿v-show：<div style={{display: 判定表达式?'block':'none'}}>
仿v-if：{ 判定表达式 && JSX } { 判定表达式 ? JSX1 : JSX2 }
列表渲染：
现实：let empList = ['亮亮', '小鑫', '小铭']
理想：
//let empList = [<li>小烙</li>, <li>小蜜</li>, <li>小柔</li>]
<ul>{ empList.map((e,i)=><li key={i}>{e}</li>) }</ul>
2.创建自定义组件的两种语法：
①类式组件(Class Component)
class BuyCount extends React.Component{
state = { count: 0 }
//生命周期方法-挂载阶段：constructor() / render() / componentDidMount()
//生命周期方法-更新阶段：shouldComponentUpdate() / render() / componentDidUpdate()
//生命周期方法-卸载阶段：componentWillUnmount()
add = ()=>{ this.setState({count: this.state.count+1}) }
render(){
return <button onClick={this.add}>{this.state.count}</button>
}
}
②函数式组件(Function Component)
function BuyCount( props ){
let [count, setCount] = useState(0)
//生命周期方法
useEffect( ()=>{
//生命周期方法1=组件挂载+任意数据更新(新值)
return ()=>{
//生命周期方法4=任意数据更新(旧值)+组件卸载
}
} )
useEffect( ()=>{
//生命周期方法2=组件挂载+指定数据更新(新值)
return ()=>{
//生命周期方法5=更新数据更新(旧值)+组件卸载
}
} , [依赖列表,...])
useEffect( ()=>{
//生命周期方法3=组件挂载
return ()=>{
//生命周期方法6=组件卸载
}
} , [ ] ) //空依赖
let add = ()=>{ setCount( count+1 ) }
return <button onClick={add}>{count}</button>
}
3.ReactNative组件库
一、React Native组件库
React是一个MVVM框架；
ReactNative是一个基于React框架的移动端UI组件库——是Facebook官方提供的；
官网：https://reactnative.dev/
中文网：https://reactnative.cn/
Vue.js+Vant项目运行原理：
.vue => Webpack编译 => .html/.css/.js => 运行于客户端浏览器
React+RN项目运行原理：
.js/.jsx => Webpack编译 => .java或.oc => JAVA或OC编译 => .apk或.ipa安装包 => 安装到手机中运行为原生App(完全脱离浏览器)
（必选操作）运行空白RN项目，在自己的电脑和手机中运行该项目——250MB+
①PC端运行RN项目自带的开发服务器
cd MyRnApp && npm start
提示：开发服务器只会占用8081端口
②启动安卓模拟器，安装RN项目编译得到的App
APK路径：MyRnApp\android\app\build\outputs\apk\debug
③启动手机中的App，在App设置中配置开发服务器的IP和端口号
查看Windows服务器当前的真正IP地址： ipconfig
例如，我当前电脑的IP地址是 192.168.0.105
点击手机“菜单键”> Settings > DebugServerHost&PortForDevice > 输入：
192.168.0.105:8081
④重启手机中的App，会自动连接开发服务器，获取最新的内容
提示：如果出现App闪退、App已停止、App无法启动、App启动后白屏…请重启App、或重新安装App、重启Windows、安装其它的模拟器… 再重试上述几步
二、RN中的样式
第一种：行内样式
<Text style={{color:'#f00'}}>
第二种：内部样式
let css = StyleSheet.create({
danger: {
color: '#f00',
}
})
第三种：外部样式
说明：
①RN中的样式没有“级联”特性，即子组件不会继承父组件的样式——仅有的一个例外：Text中的Text
②RN中的样式只能用style属性赋值，没有class/className属性——RN组件体系中没有任何一个属性是通用的，例如：有的组件没有style、所有组件都没有className、有的组件没有onClick…
③style属性可以赋值为一个样式对象，也可以赋值为一个样式对象的数组
④RN中可用的样式属性比标准CSS要少得多，例如：没有float、background、border…；有些属性虽然有，但是可用值也比标准CSS少得多，例如：display只有flex和none两种选择
⑤RN的样式中没有“选择器”的概念，样式都是对象
⑥RN中的尺寸单位只有： px 和 %，其中px必须省略不写，例如：width: ‘50%’ 或 width: 20 —— 没有rpx、vw、em等单位
⑦字体默认大小是14px（记得省略px），可以很大，也可以很小（没有12px的限制）
⑧RN中的布局只有： display: flex（默认值），而且主轴方向默认是“column”
三、RN中的组件
RN组件的官网手册：https://reactnative.cn/docs/components-and-apis
①RN中不能使用HTML组件 —— RN中的组件最终都要编译为JAVA，而HTML标签无法编译
②RN官方提供了20个组件；可以使用这20个组件组合定义出更复杂的自定义组件
RN常用组件：
①View：视图，是最简单的容器元素，默认都是“弹性容器”，而且主轴方向是纵向
②Text：文本，是最简单的文本元素，RN体系内只有Text中可以放置字符串
③Image：图像
本地图片：手机中的图片，必须把开发服务器上的图片进行编译打包，才能装进手机中
<Image source={require('../img/xx.png')}/> 无需指定尺寸
远程图片：图片在远程服务器上，只能通过URL地址来访问
<Image source={{uri: '图片的地址'}} style={{width, height}}/> 必须指定尺寸
④TextInput：单行文本输入框/单行密码输入框/多行文本输入框
互联网小知识：
URL：Unified Resource Locator，统一的资源定位符，例如：
https://www.tmooc.cn:80/img/news/101.jpg
URN：Unified Resource Naming，统一的资源命名符，例如：
tel: 13501234567、mailto: admin@tedu.cn、
javascript: window.close()、data: image/png;base64, iVBORw0KGgoA
URI：Unified Resource Identifier，统一的资源识别符，URI = URL + URN
