React DAY05

复习：

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