React中父子组件数据传递

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上绘图