react讲解（组件，生命周期以及受控组件）

本文主要是介绍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 extend

这篇关于react讲解（组件，生命周期以及受控组件）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---