react父子组件传递信息

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

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