极品-------React的组件通信,生命周期,受控组件,与非受控组件
Posted 哈比老乌龟
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了极品-------React的组件通信,生命周期,受控组件,与非受控组件相关的知识,希望对你有一定的参考价值。
React中的主要的组件通信有
一.父传子
二.子传父
三.兄弟相传
一.父传子
父组件传递数据给子组件
1.父组件中引入子组件
import Family from "./family";
2.在父组件中使用子组件
<Family/>
3.父组件提供要传递的state数据
state =
Lastname:"火娃",
4.给子组件标签添加属性.值为state中的数据
<Family name=this.state.Lastname/>
5.子组件中通过props接受父组件中传递的数据
<li>this.props.name</li>
父组件
class App extends Component
state =
hEight:174,
tex:'',
Lastname:"火娃",
shu:0
render()
return (<div>
<Family name=this.state.Lastname/>
</div>)
子组件
class Family extends React.Component
render()
return (<div>
<ul>
<li>this.props.name</li>
</ul>
</div>)
;
ReactDOM.render(<Family/>,
document.querySelector('#root'))
export default Family
二.子传父
子传父,父组件提供一个方法,把方法传给子组件,子组件调用传参,这是回调函数
1.提供方法
Child = props =>
return(
<div>
<p>props.name</p>
</div>
)
2.传给子组件
<Family getMsg=this.Child />
3.子组件调用
dianclick=()=>
this.props.getMsg(this.state.msg)
4.传入子组件的数据
state=
msg:'水娃'
dianclick=()=>
this.props.getMsg(this.state.msg)
父组件
class App extends Component
state =
hEight:174,
tex:'',
Lastname:"火娃",
shu:0
getChild=(data)=>
console.log(data)
Child = props =>
return(
<div>
<p>props.name</p>
</div>
)
render()
// let hEight = this.state
return (<div>
<Family getMsg=this.Child />
;
子组件
class Family extends React.Component
state=
msg:'水娃'
dianclick=()=>
this.props.getMsg(this.state.msg)
render()
return (<div>
<ul>
<li>this.props.name</li>
<li>this.props.shu</li>
</ul>
</div>)
;
ReactDOM.render(<Family/>,
document.querySelector('#root'))
export default Family
三.兄弟组件传参
React组件通信中兄弟传参需要媒介,他们共同的父组件该变父组件中的而改变子组件的
1.在父组件中定义方法
onIncrement = ()=>
this.setState(
shu:this.state.shu+1
)
2.在父组件中定义属性
state =
shu:0
3.传给子组件
<Family shu=this.state.shu/>
<Parent onIncrement=this.onIncrement/>
4.子组件中使用
第一个子组件
<li>this.props.shu</li>
第二个子组件
<button onClick=()=>this.props.onIncrement()>+1</button>
父组件
class App extends Component
state =
shu:0
getChild=(data)=>
console.log(data)
onIncrement = ()=>
this.setState(
shu:this.state.shu+1
)
render()
// let hEight = this.state
return (<div>
<Family shu=this.state.shu/>
<Parent onIncrement=this.onIncrement/>
</div>)
;
第一个子组件
import React from "react";
import ReactDOM from "react-dom";
class Family extends React.Component
state=
msg:'水娃'
// Child = props=>
// return (
// <div>
// <p>props.Lastname</p>
// </div>
// )
//
dianclick=()=>
this.props.getMsg(this.state.msg)
render()
return (<div>
/* <button onClick=this.Child()>父传子</button> */
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>this.props.name</li>
<li>this.props.shu</li>
</ul>
<button onClick=this.dianclick>点击葫芦娃</button>
</div>)
;
ReactDOM.render(<Family/>,
document.querySelector('#root'))
export default Family
第二个子组件
import React from "react"
import Boy from "./boy"
class Parent extends React.Component
render()
return(
<div>
<Boy />
<p>我是二组件</p>
<button onClick=()=>this.props.onIncrement()>+1</button>
</div>
)
export default Parent
四跨组件传参
const Provider,Consumer = React.createContext()
class App extends Component
render()
return (<div>
//创建
<Provider value="孙子嘿嘿">
<Parent onIncrement=this.onIncrement/>
</Provider>
</div>)
;
//消耗
<Consumer>
data => <p>我是孙子data</p>
</Consumer>
五.受控组件与非受控组件
解释:
在 html 中,表单元素(如input、 textarea 和 select)通常自己维护 state,并根据用户输入进行更新。而在 React 中,可变状态(mutable state)通常保存在组件的 state 属性中,并且只能通过使用 setState()来更新。
可以把两者结合起来,使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。
见解:
每当输入框的输入内容发生变化时,都会被写入到组件的state中,这种组件在React中被理解为受控组件。
受控组件的值,始终是由React的state驱动的。
这种组件的数据是由React组件进行管理的,所以在大多数情况下,官方推荐使用受控组件。
受控组件
import React, Component, Fragment from 'react'
export default class Demohooks extends Component
constructor(props)
super(props);
this.state =
controllValue: 0,
onChangeInput = (e) =>
this.setState(
controllValue: e.target.value
)
render()
return (
<Fragment>
<h1>受控组件</h1>
<div>this.state.controllValue</div>
用户名:<input value=null onChange=this.onChangeInput />
</Fragment>
)
非受控组件
官网:
要编写一个非受控组件,而不是为每个状态更新都编写数据处理函数,你可以使用 ref来从 DOM 节点中获取表单数据。
因为非受控组件将真实数据储存在 DOM 节点中,所以在使用非受控组件时,有时候反而更容易同时集成 React 和非 React 代码。如果你不介意代码美观性,并且希望快速编写代码,使用非受控组件往往可以减少你的代码量。否则,你应该使用受控组件。
总的来说就是操作DOM节点,所以官方推荐受控组件
非受控组件
import React, Component from 'react'
export default class Demohooks extends Component
onSubmit = (event) =>
event.preventDefault();
const inputName, password = this;
console.log(inputName.value)
console.log(password.value)
render()
return (
<div>
<form onSubmit=this.onSubmit>
用户名:<input ref=c => this.inputName = c /> <br />
密码:<input ref=c => this.password = c /> <br />
<button>登录</button>
</form>
</div>
)
React生命周期
生命周期的方法有:
constructor()
constructor()中完成了React数据的初始化,它接受两个参数:props和context,当想在函数内部使用这两个参数时,需使用super()传入这两个参数。
注意:只要使用了constructor()就必须写super(),否则会导致this指向错误。
componentWillMount()
componentWillMount()一般用的比较少,它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor()初始化数据后,但是还未渲染DOM时。
componentDidMount()
组件第一次渲染完成,此时dom节点已经生成,可以在这里调用ajax请求,返回数据setState后组件会重新渲染
componentWillUnmount ()
在此处完成组件的卸载和数据的销毁。
componentWillReceiveProps (nextProps)
在接受父组件改变后的props需要重新渲染组件时用到的比较多
接受一个参数nextProps
通过对比nextProps和this.props,将nextProps的state为当前组件的state,从而重新渲染组件
shouldComponentUpdate(nextProps,nextState)
主要用于性能优化(部分更新)
唯一用于控制组件重新渲染的生命周期,由于在react中,setState以后,state发生变化,组件会进入重新渲染的流程,在这里return false可以阻止组件的更新
因为react父组件的重新渲染会导致其所有子组件的重新渲染,这个时候其实我们是不需要所有子组件都跟着重新渲染的,因此需要在子组件的该生命周期中做判断
componentWillUpdate (nextProps,nextState)
shouldComponentUpdate返回true以后,组件进入重新渲染的流程,进入componentWillUpdate,这里同样可以拿到nextProps和nextState。
componentDidUpdate(prevProps,prevState)
组件更新完毕后,react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期,这里可以拿到prevProps和prevState,即更新前的props和state。
render()
render函数会插入jsx生成的dom结构,react会生成一份虚拟dom树,在每一次组件更新时,在此react会通过其diff算法比较更新前后的新旧DOM树,比较以后,找到最小的有差异的DOM节点,并重新渲染。
getDerivedStateFromProps(nextProps, prevState)
代替componentWillReceiveProps()。
老版本中的componentWillReceiveProps()方法判断前后两个 props 是否相同,如果不同再将新的 props 更新到相应的 state 上去。这样做一来会破坏 state 数据的单一数据源,导致组件状态变得不可预测,另一方面也会增加组件的重绘次数
getSnapshotBeforeUpdate(prevProps, prevState)
代替componentWillUpdate。
常见的 componentWillUpdate 的用例是在组件更新前,读取当前某个 DOM 元素的状态,并在 componentDidUpdate 中进行相应的处理。
这两者的区别在于:
在 React 开启异步渲染模式后,在 render 阶段读取到的 DOM 元素状态并不总是和 commit 阶段相同,这就导致在
componentDidUpdate 中使用 componentWillUpdate 中读取到的 DOM 元素状态是不安全的,因为这时的值很有可能已经失效了。
getSnapshotBeforeUpdate 会在最终的 render 之前被调用,也就是说在 getSnapshotBeforeUpdate 中读取到的 DOM 元素状态是可以保证与 componentDidUpdate 中一致的。
此生命周期返回的任何值都将作为参数传递给componentDidUpdate()。
以上是关于极品-------React的组件通信,生命周期,受控组件,与非受控组件的主要内容,如果未能解决你的问题,请参考以下文章
极品-------React的组件通信,生命周期,受控组件,与非受控组件