Vue.js中父子组件数据传递:Props Down , Events Up
Angular中父子组件数据传递:Props Down, Events Up
React中父子组件数据传递:Props Down,Props Up
一、React中父子组件数据传递
父 => 子:父亲通过子组件的自定义属性,把自己的数据传递下去
Parent.js:
<Child myNameInChild={this.state.myNameParent}/>
Child.js:
<h3>{this.props.myNameInChild}的照片墙</h3>
子 =>父: 父亲通过子组件的自定义属性,把自己的方法传递下去;子组件调用此方法,传递实参.
"Props Up"的原理:
Parent.js:
doModifyMyName = (newName)=>{ }
<Child modifyName={ this.doModifyMyName }/>
Child.js:
this.props.modifyName('ABC');
Parent p =new Parent()
p.doModifyMyName = function(newName){ ..... }
Child c =new Child()
c.modifyMyName = p.doModifyMyName //父的方法传给子
c.modifyMyName('ABC');
React中没有直接的兄弟间数据传递机制,只能借助父组件: 兄弟1 => 父组件 => 兄弟2
Parent.js
constructor(){
super()
this.c2 = React.createRef() //子组件的引用
}
---------------------------------------------------------------
<h3.MyC03 ref={this.c3}> //子组件的引用绑定到某个孩子
---------------------------------------------------------------------
this.c3.current 是孩子对象
Vue.js中父组件获得子组件的引用:
<Child ref="c2"/>
this.$refs.c2
------------------------------------
<Child #c2/>
@ViewChild('c2',{static:true})
private child2
------------------------------------
React中父组件获得子组件的引用
<Child ref={ }/>
二、理论知识补充: class中的静态(static)成员
类(class) 中的成员分为两大类:
①实例成员：实例属性、实例方法
②静态成员：静态属性、静态方法
三、面试题:React中组件的生命周期钩子函数 ------比较凌乱
提示: React不同版本中生命周期钩子函数各不相同!React16.3和React16.4中的都不相同!
React组件的生命周期钩子函数分为三组:
1)首次渲染相关函数
①contstructor()
②componentWillMount() (已废弃)===getDeriveStateFormProps() 用于将this.props转为this.state
③render()
④componentDidMount() 用于初始化组件中的数据,如异步获取服务器端数据
2)二次渲染相关函数(props属性更改、setState状态修改)
①getDerivedStateFromProps() 需要返回转换得到state对象或null
②shouldComponentUpdate() 需要返回true或false
③render()
④componentDidUpdate()
3)组件卸载相关函数
①componentWillUnmount() 用于销毁组件创建的长期存在的数据,如定时器...
强化记忆:三大框架,组件加载完成和卸载完成钩子函数
Vue.js Angular React
组件加载完成 mounted(){} ngOnInit(){ } componentDidMount(){}
组件即将卸载 beforeDestroy(){} ngOnDestory(){} componentWillUnmount(){}
四、复习:前端技术中创建移动App的技术有哪些?
①原生开发:Android下用Java/Kotlin,IOS下用OC/Swift
②H5/WebView:使用浏览器内核打开特定的页面 ------------Vue.js/Mint-UI
③混编开发:H5/WebView+Cordova/PhoneGap -------------Angular/lonic
④JS Bridge:代码使用JS,使用桥梁转换,运行时是Java或OC ------------ React/RN
⑤Flutter:使用全新的Dart语言,直接在手机GPU上绘图