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的组件通信,生命周期,受控组件,与非受控组件