组件与props简解
一、创建组件
1.函数式创建
特点:
- 组件不能访问this对象
- 组件无法访问生命周期的方法
- 无状态组件只能访问输入的props,无副作用
function Title() {
return <h2>新闻列表</h2>;
} 2.继承component类来创建组件 (一般我们用继承React.Component类的方式来创建组件)
特点:
- 组件能访问this对象
- 组件有访问生命周期的方法
- 有组件状态state
class Title extends React.Component{
constructor(props){
super(props);
}
render() {
return <h2>新闻列表</h2>;
}
}
二、组件渲染
单闭合调用(只能传props的值)
<Title /> 双闭合调用 (标签内还可以写子标签)
<Title></Title>
<Title>hello word</Title> 在组件内可以通过this.props.children获取, 或者通过React.Children.map(this.props.children, item=>{returm <div>{item}</div>})
三.属性
调取组件的时候,传递给组件的信息(render渲染的时候会把props传递给组件,props就是属性)
作用:让组件丰富化(传递不同的属性控制组件展示不同的效果)
特点:传递进来的属性在组件内部不能修改,也就是它是“只读的”。(修改属性的值,只能重新调取组件并且重新传递值)
虽然不可以修改属性值,但是在类创建组件的方式中,我们可以给组件设置默认值和设置一些规则。
import React from 'react'; import PropTypes from 'prop-types'; //使用 PropTypes 进行类型检查 class Say extends React.Component{
//设置默认值
static defaultProps = {
title: 'hello word'
}
//设置默认规则
static propTypes = {
title: PropTypes.string,
num: PropTypes.number.isRequired
}
constructor(props){
//当super中没有传入props时
/**
* 1.在调用组件开始执行constructor,参数props是传递进来的属性信息(而且是经过defaultProps和propTypes等处理过的)
* 2.但是此时还没有挂载到实例上,所以this.props的结果是undefined
* 3.constructor结束后,挂载就完成了,所以其它生命周期函数中是可以基于this.props来获取属性的
*/
// super();
// console.log(props, this.props) //{title: "two", num: 20} undefined //当super中传入props时
/**
* 会在当前实例上挂载很多私有属性
* this.props = props;
* this.context = context;
* this.refs = {};
* 现在不这样处理,当constructor执行完成,react也会帮我们给实例挂载这些属性
*/
super(props); //call继承:React.Component.call(this)
console.log(props, this.props) //{title: "two", num: 20} {title: "two", num: 20} //实例上还可以调取Component类的两个方法
/**
* this.setState()
* this.forceUpdate()
*/
}
render() {
return (
<p>{this.props.title}</p>
)
}
}
// Say.propTypes = {
// title: PropTypes.string
// }
export default Say; <Say title={'two'} num={20}></Say>
组件与props简解的更多相关文章
- React Native组件、生命周期及属性传值props详解
创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...
- 【react】利用prop-types第三方库对组件的props中的变量进行类型检测
1.引言--JavaScript就是一个熊孩子 1.1对于JSer们来说,js是自由的,但同时又有许多让人烦恼的地方.javascript很多时候就是这么一个熊孩子,他很多时候并不会像C和java ...
- React 精要面试题讲解(二) 组件间通信详解
单向数据流与组件间通信 上文我们已经讲述过,react 单向数据流的原理和简单模拟实现.结合上文中的代码,我们来进行这节面试题的讲解: react中的组件间通信. 那么,首先我们把看上文中的原生js代 ...
- 在vue中子组件修改props引发的对js深拷贝和浅拷贝的思考
不管是react还是vue,父级组件与子组件的通信都是通过props来实现的,在vue中父组件的props遵循的是单向数据流,用官方的话说就是,父级的props的更新会向下流动到子组件中,反之则不行. ...
- React—组件生命周期详解
React—组件生命周期详解 转自 明明的博客 http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢 ...
- Vue组件通信方式全面详解
vue组件通信方式全面详解 众所周知,Vue主要思想就是组件化开发.因为,在实际的项目开发中,肯定会以组件的开发模式进行.形如页面和页面之间需要通信一样,Vue 组件和组件之间肯定也需要互通有无.共享 ...
- python ConfigParser、shutil、subprocess、ElementTree模块简解
ConfigParser 模块 一.ConfigParser简介ConfigParser 是用来读取配置文件的包.配置文件的格式如下:中括号“[ ]”内包含的为section.section 下面为类 ...
- vc中调用Com组件的方法详解
vc中调用Com组件的方法详解 转载自:网络,来源未知,如有知晓者请告知我.需求:1.创建myCom.dll,该COM只有一个组件,两个接口: IGetRes--方法Hello(), IGet ...
- Vue组件选项props
前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...
随机推荐
- H3C 广域网的作用
- 一个框架看懂优化算法之异同 SGD/AdaGrad/Adam
Adam那么棒,为什么还对SGD念念不忘 (1) —— 一个框架看懂优化算法 机器学习界有一群炼丹师,他们每天的日常是: 拿来药材(数据),架起八卦炉(模型),点着六味真火(优化算法),就摇着蒲扇等着 ...
- 【DCN】Wireless Intranet Captive Portal
Wireless Intranet Captive Portal 配置AAA服务Radius认证 radius-server key 0 radius radius-server authentica ...
- 求解最长回文串 manachar算法
转载:http://blog.sina.com.cn/s/blog_70811e1a01014esn.html ;i<len;++i){ if(mx>i) p[i]=min(p[*id-i ...
- Spring Boot 动态数据源(多数据源自动切换)
本文实现案例场景: 某系统除了需要从自己的主要数据库上读取和管理数据外,还有一部分业务涉及到其他多个数据库,要求可以在任何方法上可以灵活指定具体要操作的数据库. 为了在开发中以最简单的方法使用,本文基 ...
- Python--day30--软件开发架构
软件开发架构: C/S架构: B/S架构: B/S架构和C/S架构的关系:
- ASP.NET一般登陆逻辑分享(01)
- 2019-5-21-NuGet-符号服务器
title author date CreateTime categories NuGet 符号服务器 lindexi 2019-05-21 11:34:40 +0800 2019-05-08 21: ...
- 【23.91%】【hdu 4694】Important Sisters("支NMLGB配树"后记)(支配树代码详解)
Time Limit: 7000/7000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Total Submission( ...
- koa2--04.ejs模板引擎
首先在项目文件下使用cmd,输入:npm install --save koa-views ejs,将koa-views中间件和ejs模板引擎安装到文件中,并自动写入依赖 接在在index.js文件中 ...