react讲解（组件，生命周期以及受控组件）
Posted stay_少年与梦
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react讲解（组件，生命周期以及受控组件）相关的知识，希望对你有一定的参考价值。
文章目录
前言
今天我们一起来学习react 中的组件，以及它们组件与组件间的通信方式。
一、组件的通信原理
在 React.js 中，数据是从上自下流动（传递）的，也就是一个父组件可以把它的 state / props 通过 props 传递给它的子组件，但是子组件不能修改 props - React.js 是单向数据流，如果子组件需要修改父组件状态（数据），是通过回调函数方式来完成的。
父传子: 把数据添加到子组件,然后子组件从props属性中,获取父组件传来的数 据;
子传父:在父组件中定义相关数据的操作方法,把该方法传递给子组件,在子组件中传递信息
state 和 setState
state 中存放的是数据
setState(updater, [callback])用来修改state里面的值
updater: 更新数据 function/object
callback: 更新成功后的回调函数
异步:react通常会集齐一批需要更新的组件，然后一次性更新来保证渲染的性能
浅合并 Objecr.assign()
二、组件分类
1.类组件
1.组件类必须继承 React.Component
2.组件类必须有render 方法
3.render 方法的return 后定义组件的内容
代码示例
class App extends Component {
state= {
nub:20,name: "折耳猫",sex:"kaiaia"
}
// state ={nub:nub+1 }
// 类式组件中，定义constructor ,一定需要接受props，调用super
// constructor(props) {
// super(props);
// this.state = {
// nub:0
// }
// }
setAge= ()=>{
this.setState({
nub:this.state.nub+1
})
}
setName=()=>{
this.setState({name:"可爱"})
}
render(){
let {nub} = this.state;
return (<div>
{}
<p>{this.state.name}</p>
<p>{this.state.nub}</p>
<button onClick={()=>{
this.setAge()
this.setName()
}}>长一岁</button>
</div>)
}
}
export default App;
记得导出
2.组件中父子组件的通信
代码示例
App.js
import React,{Component} from "react";
import FriendList from "./FriendList"
class App extends Component {
state ={
name: '张三',
hobby: '哈哈'
}
changValue = (newName)=>{
this.setState({name:newName})
}
render(){
let {hobby} =this.state
return (<div>
<p>{this.state.name}</p>
<FriendList
hobby = {hobby}
changValue={this.changValue}
/>
</div>)
}
}
export default App;
A组件代码
import React,{Component} from "react";
import './FriendList.css';
import data from './data';
import Dl from './dL'
export default class Friendlist extends Component {
state ={
isOpen:"" //哪一项是展开的
}
// 传递给子组件，点击哪个子组件，子组件就将自身的name传参过来
changeOpen =(name)=>{
this.setState({isOpen:name})
}
render(){
let {isOpen} = this.state;
let {changValue} = this.props;
return (
<div>
<button onClick={
()=>{changValue('牛肉')}
}>dianwo</button>
<div className="friend-list">
{
Object.keys(data).map(item=>{
return (
<Dl
name = {item}
value ={data[item]}
isOpen ={isOpen}
changeOpen = {this.changeOpen}
/>
)
})
}
</div></div>
)
}
}
B组件代码：
import React,{Component} from "react";
export default class Dl extends Component {
state ={
isOpen:true
}
render() {
let {title,list} = this.props.value;
// name 每一组的属性名
// isOpen 哪一项需要展开
let {name,isOpen,changeOpen} = this.props;
// let {isOpen} = this.state;
return(
<div className={"friend-group" +(name==isOpen ? "expanded":"")}>
<dt onClick={
()=>{
// this.setState({isOpen:!isOpen})
changeOpen(name);
}
}>{title}</dt>
{
list.map((item,index)=>{
return <dd key={index}>{item.name}</dd>
})
}
</div>
)
}
}
2. 跨组件通信
React 里的两个方法: Provider :存数据
Consumer: 取数据
通俗的讲:多个组件通信(A,B,C组件,A想和C通信)
首先 创建一个context.js文件
代码如下：
import React,{ createContext} from 'react'; //引入react里的方法
let context= createContext(); //定义一个变量
let {Consumer,Provider}=context; //找到变量里的方法
export default context //暴露
export {Consumer,Provider} //暴露
A组件代码如下：
import React, { Component } from "react";
import FriendList from "./FriendList"
import { Provider } from "./context";
class App extends Component {
// state ={
// info:"哈哈"
// }
render() {
return (
<Provider value={{
info:"猥琐发育"
}}>
<div>
<FriendList
/>
</div>
</Provider>)
}
}
export default App;
C组件代码如下:
import React,{Component} from "react";
import { Consumer } from "./context";
export default class Dl extends Component {
render() {
let {title,list} = this.props.value;
// name 每一组的属性名
// isOpen 哪一项需要展开
let {name,isOpen,changeOpen} = this.props;
// let {isOpen} = this.state;
return(
<div className={"friend-group" +(name==isOpen ? "expanded":"")}>
<dt onClick={
()=>{
// this.setState({isOpen:!isOpen})
changeOpen(name);
}
}>{title}</dt>
<p>
<Consumer>{value=>value.info}</Consumer>
</p>
{
list.map((item,index)=>{
return <dd key={index}>{item.name}</dd>
})
}
</div>
)
}
}
三.组件的生命周期
所谓的生命周期就是指某个事物从开始到结束的各个阶段，当然在 React.js 中指的是组件从创建到销毁的过程，React.js 在这个过程中的不同阶段调用的函数，通过这些函数，我们可以更加精确的对组件进行控制，前面我们一直在使用的 render 函数其实就是组件生命周期渲染阶段执行的函数.
生命周期演变
之前（React 16.3 之前）
挂载阶段
- constructor
- componentWillMount
- render
- componentDidMount
更新阶段
父组件更新引起组件更新
- componentWillReceiveProps(nextProps)
- shouldComponentUpdate(nextProps,nextState)
- componentWillUpdate(nextProps, nextState)
- render
- componentDidUpdate(prevProps, prevState)
组件自身更新
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
卸载阶段
componentWillUnmount
现在
挂载阶段
- constructor
- static getDerivedStateFromProps(props, state)
- render
- componentDidMount
更新阶段
父组件更新引起组件更新
- static getDerivedStateFromProps(props, state)
- shouldComponentUpdate()
- componentWillUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
组件自身更新
- shouldComponentUpdate()
- componentWillUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
卸载阶段
componentWillUnmount
错误处理
- static getDerivedStateFromError()
- componentDidCatch(error, info)
详解
constructor(props)
类的构造函数，也是组件初始化函数，一般情况下，我们会在这个阶段做一些初始化的工作
初始化 state
处理事件绑定函数的 this
render()
render 方法是 Class 组件必须实现的方法
static getDerivedStateFromProps(props, state)
该方法会在 render 方法之前调用，无论是挂载阶段还是更新阶段，它的存在只有一个目的：让组件在 props 变化时更新 state
componentDidMount()
在组件挂载后（render 的内容插入 DOM 树中）调用。通常在这个阶段，我们可以：
- 1.操作 DOM 节点
- 2.发送请求
shouldComponentUpdate(nextProps, nextState)
发生在更新阶段，getDerivedStateFromProps 之后，render 之前，该函数会返回一个布尔值，决定了后续是否执行 render，首次渲染不会调用该函数
getSnapshotBeforeUpdate(prevProps, prevState)
该方法在 render() 之后，但是在输出到 DOM 之前执行，用来获取渲染之前的快照。当我们想在当前一次更新前获取上次的 DOM 状态，可以在这里进行处理，该函数的返回值将作为参数传递给下个生命周期函数componentDidUpdate。
注意：该函数并不常用。
componentDidUpdate()
该函数会在 DOM 更新后立即调用，首次渲染不会调用该方法。我们可以在这个函数中对渲染后的 DOM 进行操作
componentWillUnmount()
该方法会在组件卸载及销毁前调用，我们可以在这里做一些清理工作，如：组件内的定时器、未完成的请求等。
错误处理
当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法
- static getDerivedStateFromError()
- componentDidCatch()
四.受控组件与非受控组件
受控组件：类似于vue的双向数据绑定
数据和视图之间可以相互影响
非受控组件：类似于单向数据流 只可以数据改变视图
受控组件代码示例：
import React,{Component} from 'react';
class App extends Component {
state={
info:'这是value值'
}
render(){
let {info}=this.state;
return (
<div>
<input
type='text'
value={info}
onChange ={({target})=>{
this.setState({
info:target.value
})
}}
/>
<button onClick={()=>{
console.log(info)
}}>点一点</button>
</div>
)
}
}
export default App;
非受控组件代码示例：
import React,{Component} from 'react';
class App extends Component {
state={
info:'这是value值'
}
render(){
let {info}=this.state;
return (
<div>
<input type='text' defaultValue={info}/>
<input type='text' defaultValue={info}/>
<input type='text' defaultValue={info}/>
<button onClick={()=>{
console.log(info)
}}>点一点</button>
</div>
)
}
}
export default App;
defaultValue:非受控组件,input框里的值发生变化,state的值不会发生变化
总结
组件是各个框架必不可少的一部分,而各个框架的组件的使用方式也都并不完全一样。
今天我们主要学习了组件之间的通信方式，以及学习了一下react 中的生命周期，以及什么是受控组件和非受控组件。
受控组件类似于vue的双向数据绑定，数据和视图之间可以相互影响
而非受控组件：类似于单向数据流 只可以数据改变视图。
今天我们就学习到这里
以上是关于react讲解（组件，生命周期以及受控组件）的主要内容，如果未能解决你的问题，请参考以下文章
极品-------React的组件通信,生命周期,受控组件,与非受控组件
极品-------React的组件通信,生命周期,受控组件,与非受控组件