React学习笔记2：React面向组件编程

面向组件编程

概述

组件名必须首字母大写
虚拟DOM元素只能有一个根元素
虚拟DOM元素必须有结束标签

渲染类组件标签的基本流程

React内部会创建组件实例对象
调用render()得到虚拟DOM，并解析为真实的DOM
插入到指定的页面元素内部

组件的三大核心属性：state

定义

state是组件对象最重要的属性，值是对象（可以包含多个key-value 的组合）
组件被称为“状态机”，通过更新组件的state来更新对应的页面显示（重新渲染组件）

注意点

组件中render方法中的this为组件实例对象
组件自定义的方法中this为undefined，如何解决？
- 强制绑定this：通过函数对象的bind()
- 箭头函数
状态数据，不能直接修改或更新

组件的三大核心属性：props

定义

每个组件对象都会有props（properties的简写）属性
组件标签的所有属性都保存在props中

作用

通过标签属性从组件外向组件内传递变化的数据
组件内部不要修改props数据

编码操作

内部读取某个属性值
```
this.props.name
```
对props中的属性值进行类型限制和必要性限制（使用prop-types库进行限制，【需要引入prop-types库】）
```
Person.propTypes = {name: PropTypes.string.isRequired,age:PropTypes.number
}
```
扩展属性：将对象的所有属性通过props传递
```
<Person {...person}/>
```

默认属性

Person.defaultProps = {age: 18,sex: '男'
}

组件类的构造函数

constructor(props){super(props)console.log(props)//打印所有的属性
}

组件三大核心属性：refs与事件处理

定义

组件内的标签可以定义ref属性来标识自己

编码

字符串形式的ref
```
<input ref="input1"/>
```
回调形式的ref
```
<input ref={(c)=>{this.piput1=c}}
```

createRef创建ref容器

myRef = React.createRef()
<input ref={this.myRef}/>

事件处理

通过onXxx属性指定事件处理函数(注意大小写)
- React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
- React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
通过event.target得到发生事件的DOM元素对象

组件的生命周期

概述

组件从创建到死亡会经历一些特定的阶段
React组件中包含一系列钩子函数（生命周期回调函数），会在特定的时刻调用
在定义组件时，会在特定的生命周期回调函数中，做特定的工作

生命周期流程图（新）

生命周期的三个阶段（新）

初始化阶段：由ReactDOM.render()触发——初次渲染
- construcror()
- getDeriverdStateFromProps
- render()
- componentDidMount()：一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
更新阶段：由组件内部this.setState()或父组件重新render触发
- getDerivedStateFromProps
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate
- componentDidUpdate()
卸载组件：由ReactDOM.unmountComponentAtNode()触发
- componentWillUnmount()：一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

重要的钩子

render：初始化渲染或更新渲染调用
componentDidMount：：开启监听，发送ajax请求
componentWillUnmount：做一些收尾工作，如：清理定时器

React学习笔记2：React面向组件编程相关推荐

React学习笔记一(React入门+JSX+脚手架)
文章目录 1. React介绍和特点 1.1 React是什么 1.2 React的特点 2. React的开发依赖 2.1 React的三个依赖 2.2 Babel和React的关系 2.3 Rea ...
React学习笔记六 React拓展 - SetState
React拓展 - setState setState更新状态的两种写法 1.setState({}, [callback]) export default class Test extends Co ...
React学习笔记一 JSX语法组件
JSX语法 1.标签不能添加引号,换行用括号包裹,并且只有一个根标签 const H1 = <h1>标题</h1> const Div = (<div><h1 ...
React学习笔记(五)之父子组件传递参数
父传子通过属性,父组件向子组件传递参数. this.state.list.map((item,index)=>{<todoItem content={item} /> } 子组件通 ...
React学习笔记 - 组件Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
b站React禹哥版视频笔记-React面向组件编程（上）
目录前言一.开发者工具的安装二.函数式组件三.复习类相关知识四.类式组件五.组件实例的三大核心属性1:state 1.对state的理解 2.初始化state 3.react中的事件绑定 ...
React学习：ref调用、组件封装调用-学习笔记
文章目录 React学习:ref调用.组件封装调用-学习笔记 ref调用-string形式 ref调用-回调形式(官方推荐) ref调用-父调子组件封装调用demo(全选) demo1(单组件) d ...
react组件卸载调用的方法_好程序员web前端培训分享React学习笔记（三）
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...

React学习笔记2：React面向组件编程

面向组件编程

概述

渲染类组件标签的基本流程

组件的三大核心属性：state

定义

注意点

组件的三大核心属性：props

定义

作用

编码操作

组件三大核心属性：refs与事件处理

定义

编码

事件处理

组件的生命周期

概述

生命周期流程图（新）

重要的钩子

React学习笔记2：React面向组件编程相关推荐

最新文章

热门文章