React中父子组件数据传递

Vue.js中父子组件数据传递:Props Down , Events Up

Angular中父子组件数据传递:Props Down, Events Up

React中父子组件数据传递:Props Down,Props Up

一、React中父子组件数据传递

父 => 子:父亲通过子组件的自定义属性,把自己的数据传递下去

Parent.js:

Child.js:

<h3>{this.props.myNameInChild}的照片墙</h3>

子 =>父: 父亲通过子组件的自定义属性,把自己的方法传递下去;子组件调用此方法,传递实参.

"Props Up"的原理:

Parent.js:

doModifyMyName = (newName)=>{ }

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中父组件获得子组件的引用:

this.$refs.c2

------------------------------------

@ViewChild('c2',{static:true})

private child2

------------------------------------

React中父组件获得子组件的引用

二、理论知识补充: 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上绘图

React中父子组件数据传递

相关推荐