一起学React--组件定义和组件通讯
React主打函数式编程,配合上JSX语法,基本上可以把每个模块都封装为单独组件,用组件一时爽,一直用一直爽。
1.函数式组件
在React中最简单的即是创建一个函数式,没有生命周期的组件,这与 Vue 的单文件 .vue 一个完整生命周期组件不同,举个例子。
// 定义weblcome 组件
function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}
复制代码
这里的props属性对象是React中组件单向数据传递的唯一标示,在函数式组件中,我们可以通过 props.name 来获取 其他组件传递的name 属性,这点和Vue是没有本质区别的。
// 子组件 获取name属性
function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}// 父组件传入name属性
const element = <Welcome name="Sara" />;
ReactDOM.render(element,document.getElementById('root')
);复制代码
2.class 组件
函数式组件由于没有生命周期的定义,虽然简洁,但是拓展方面较差,我们把上面的welcome,改写为class组件
class Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>;}
}
复制代码
welcome继承自React.Component 组基类,在class组件中,作用域为当前组件,所以使用this对象来代替。
class组件有完整的生命周期,当组件插入到DOM中时,会依次调用生命周期函数。
render() 是class组件中必须实现的方法 当每次render 被触发是都会检查 this.props 和this.state 的变化、 同理适用于任何class 组件的检查方式 所以在处理函数时,要考虑好应该在组件生命周期的那一步触发,反之容易凉凉,或影响性能
3.顺滑的组件抽取方式
每个class组件, 无论单独调用,还是循环调用,都有自己的生命周期和单独的state。
举个实际场景。 比如:维护一个列表,列表中有, 全部,完成,失败,进行中,等状态type。 首先想到的是维护一个type 数组,然后通过map 循环的方式来产生列表 好处是数据操作方便,缺点就是和其他 n个列表公用一个state ,没有办法将其中某个item的状态区分开来
通过维护一个item组件,每个item都有自己的state,随心所欲的操作
all in all 每个通过map 循环的item, 都可以根据业务考虑封装为一个组件,因为你定义的时候就是一个变量, 不会像vue 通过v-for 指令渲染,后期抽离的成本不是很大。
Warning 如果shouldComponentUpdate 返回false 则不会render
当组件的props 或者state 变化时会触发更新。 会依次执行下面的生命周期
- static getDerivedStateFromProps()
- shouldComponentUpdate() // 必要时来做性能优化,在第一期提过
- render() // 必须要用
- getSnapshotBeforeUpdate()
- componentDidUpdate() // 最常用的组件状态更新判断
最比较常用的除了 componentDidMount() 之外,还有 componentDidUpdate() 来判断组件是否需要更新。
4.使用propTypes进行类型检查 propsTypes 是React友好的类型检查,通常和组件搭配使用。
使用方法非常简单,上图
二、 组件通讯方式 在单向通信中,最常见的就是通过prop方式。
父 - 子
子组件定义好item参数 父组件按照propTyes进行传参 子组件通过 this.props.item 取值
子 - 父
// 子组件
HomeItem.defaultProps = {item: {},// 定义回调函数fetchData: () => {},
};HomeItem.propTypes = {item: PropTypes.object,fetchData: PropTypes.func,
};
复制代码
// 在子组件handleSuccessDel = () => {const successUrl = {url: `/xq/statuses/destroy/${this.state.uid}.json`,params: {},};const draftUrl = {url: '/xq/statuses/draft/delete.json',params: { id: this.props.item.textId },};const delUrl = this.props.item.typeName === '草稿' ? draftUrl : successUrl;httpClient.post(delUrl.url, delUrl.params).then((res) => {if (res.success) {this.setState({showModal: false,});Toast({ text: '删除成功', type: 'success' });// 通过参数执行父组件传过来的callback 进而引起父组件状态改变this.props.fetchData();}}).catch((err) => {console.error(err);});};
复制代码
转载于:https://juejin.im/post/5ca05d176fb9a05e304a8ae6
一起学React--组件定义和组件通讯相关推荐
- 从零学React Native之12 组件的生命周期
一个React Native组件从它被加载,到最终被卸载会经历一个完整的生命周期.所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键. ES6语法和之前的ES5 ...
- vue组件定义、组件的切换、组件的通信、渲染组件的几种方式(标签、路由、render)...
vue中全局的概念是什么?---就是全局定义的功能,所有实例化的vm都可以使用, 全局定义的是挂在构造函数Vue上面的,所以实例化出的对象都可以使用这个功能 1.什么是组件?---从UI的角度把页面 ...
- ReactNative简介、开发环境、调试、常用组件、useState状态、FlatList组件、SectionList组件、Platform 模块、定义样式、图片组件、触摸事件、打包apk发布版
ReactNative简介: ReactNative是基于React语法来进行开发移动app的框架: ReactNative中提供了移动端专用的一些组件,我们要使用ReactNative固有的组件代替 ...
- React 30 秒速学:制作星级评分组件
本文译自:30-seconds-of-react . React 30 秒速学: 精选有用的 React 片段,30-seconds-of-react 的中文版本,已全部完成翻译.上线,地址:30-s ...
- React学习:事件绑定、组件定义、for、map循环-学习笔记
文章目录 React学习:事件绑定.组件定义.for.map循环-学习笔记 事件绑定 组件定义 (参数传递) for.map循环 React学习:事件绑定.组件定义.for.map循环-学习笔记 事件 ...
- [react] 使用ES6的class定义的组件不支持mixins了,那用什么可以替代呢?
[react] 使用ES6的class定义的组件不支持mixins了,那用什么可以替代呢? HOC 高阶组件是一个以组件为参数并返回一个新组件的函数.HOC 运行你重用代码.逻辑和引导抽象.最常见的可 ...
- 前端学习(2225):react之类定义组件
import React from 'react'; import ReactDOM from 'react-dom';function Childcom() {let title = < h2 ...
- React Native 二 常用组件与开源组件
2019独角兽企业重金招聘Python工程师标准>>> #0.手把手教React Native实战之开山篇##作者简介东方耀 Android开发RN技术 facebookgithub ...
- 【react】子组件向父组件传值
相信已经接触react的同学们,对父子间传值已经不陌生了,但是相对来说,父组件向子组件传值很简单,直接在 子组件的标签上传过去,再从子组件的props上结构出来就ok了,但是很多同学还是理解不了如何由 ...
最新文章
- 深度学习:自然语言处理(五)NLTK的经典应用
- MySQL DDL操作--------外键最佳实战
- P7116-[NOIP2020]微信步数【数学】
- MySQL性能,杀疯了
- Zdal分库分表中间件介绍
- Python使用---面向对象OOP(类和对象)--完善中
- java day16 【异常、线程】
- Lenovo System x 硬件Windows Server驱动下载
- 工业园区与大型制造工厂企业食堂消费管理系统常见需求及解决方案
- 全自动抠图换背景软件下载_抠图换背景app下载-抠图换背景下载v1.1.6 安卓版-西西软件下载...
- html中output标签详细介绍
- 循环卷积和线性卷积的关系
- 百度鹰眼服务平台部署教程
- 中国制造显威,动力电池出货量翻倍增长,已居于绝对领先地位
- 调用WPS服务COM组件转换PDF
- 双云台AI智能分析跟踪会议云台摄像机技术应用
- 【C++】默认成员函数
- 面试突击:什么是粘包和半包?怎么解决?
- C#利用DirectX显示.x三维动画
- wordpress谷歌字体_如何以“正确”的方式在WordPress主题中添加Google Web字体