react 的定义组件(了解)
react 中定义组件的方法
1. 定义组件 React.createClass() (被淘汰了)
定义组件中的函数 methods 的中的 this 统统指向 组件
2. 函数定义组件
定义的组件时无状态的,没有 state 的状态,没有生命周期,就是一个纯粹的静态页面,不能访问 this
3. class 定义组件
class 中的事件函数中的 this 不是指向函数本身,而是 null
class 创建的组件的成员函数需要手动绑定
在构造函数里面,受到手动绑定,让事件成员中 函数 this 指向当前组件
class 中,如何修改数据
this.setState({
name: 'lisi'
})
不能通过变量是赋值来修改;
this.state.weight = 12;
怎么访问 state , 在模板中使用 {this.state.属性} 就可以了
<App name="fei" age=21 />
React 中的 props 属性
组件标签上的水星,都会记录在定义在组件中的一个 props 的属性
访问 props --> this.props.name
props 的值,不能改变,而 state 中的值可以改变
propTypes 和 defaultProps
propTypes 验证 props 中的数据类型必须合法
defaultProps 设置,props 的初始值
es6 class 类的角度来说,给类添加静态属性
类的属性叫静态成员
react 的定义组件(了解)的更多相关文章
- React中类定义组件constructor 和super
刚开始学习React没多久,在老师的教程里看到了类组件的使用示例,但是和资料上有些冲突,而引发了一些疑问: 类组件中到底要不要定义构造函数constructor()? super()里边到底要不要传入 ...
- [React] 函数定义组件
函数定义组件的例子 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } 该函数是一个有效的 Rea ...
- 使用react定义组件的两种方式
react组件的两种方式:函数定义,类定义 在定义一个组件之前,首先要明白一点:react元素(jsx)是react组件的最基本的组成单位 组件要求: 1,为了和react元素进行区分,组件名字首必须 ...
- React 中的 定义组件的 两种方式
React 中创建 Components 的方式有两种:Function and Class 定义一个组件最简单的方法就是写一个 JavaScript 函数 function Welcome(prop ...
- React Native的组件ListView
React Native的组件ListView类似于iOS中的UITableView和UICollectionView,也就是说React Native的组件ListView既可以实现UITableV ...
- react - 解刨组件的多种写法
一,原始的createClass写法 对于写react组件,很多人第一印象往往是createClass,这是因为createClass是react组件最原始的写法,基本每个学react的人都是接触这种 ...
- 聊聊React高阶组件(Higher-Order Components)
使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...
- React——高阶组件
1.在React中higher-order component (HOC)是一种重用组件逻辑的高级技术.HOC不是React API中的一部分.HOC是一个函数,该函数接收一个组件并且返回一个新组件. ...
- React笔记:组件(3)
1. 组件定义 组件是React的核心概念,组件将应用的UI拆分成独立的.可复用的模块. 定义组件的两种方式: (1)类组件:使用ES6 class (2)函数组件:使用函数 使用class定义组件的 ...
随机推荐
- 首次给app添加页面
app添加页面的步骤(含泪史,都是自己摸索出来的) 1.通过页面上的文字,利用搜索功能找到这个页面 2.根据这个页面找到这个页面的action(注意了,这个R.layout.后面这个是页面文件名字) ...
- Java高并发程序设计学习笔记(十一):Jetty分析
转自:https://blog.csdn.net/dataiyangu/article/details/87894253 new Server()初始化线程池QueuedThreadPoolexecu ...
- Java高并发程序设计学习笔记(九):锁的优化和注意事项
转自:https://blog.csdn.net/dataiyangu/article/details/87612028 锁优化的思路和方法减少锁持有时间减小锁粒度锁分离锁粗化举个栗子举个栗子锁消除虚 ...
- hbuilder打包集成文件预览
<div class="attachments"> <div class="name">附件</div> <div c ...
- odoo字段属性
以下为可用的非关联字段类型以及其对应的位置参数: Char(string)是一个单行文本,唯一位置参数是string字段标签. Text(string)是一个多行文本,唯一位置参数是string字段标 ...
- kali工具的总结
由于篇幅有限,只列举部分,ps:第一次发有什么不对的 还望各位大大指正 nc 瑞士军刀 [v1.10-41] 使用格式: nc [-参数] 主机名 端口[s] [端口] … 侦听入站: nc -l - ...
- Perl环境安装
在我们开始学习 Perl 语言前,我们需要先安装 Perl 的执行环境. Perl 可以在以下平台下运行: Unix (Solaris, Linux, FreeBSD, AIX, HP/UX, Sun ...
- 数据库——Oracle(6)
1 默认值约束(默认值):对表中的某个列提前设置好默认值,当执行插入操作的时候,如果该列没有插入列值,则系统会自动的插入之前设置的默认值. 1)每个列只能插入一个默认值. 2)创建表的时候设置默认值. ...
- Sereja and Brackets CodeForces - 380C (树状数组+离线)
Sereja and Brackets 题目链接: CodeForces - 380C Sereja has a bracket sequence s1, s2, ..., *s**n, or, in ...
- java线程基础巩固---通过实验分析This锁和Class锁的存在
This锁: 关于什么是This锁下面用实现来说明一下它: 那下面用两个线程分别调用这两个方法,如下: 看结果: 可见两个方法是同时输出的,因为m2()方法并未上锁,所以就不存在争锁的问题,那这时给m ...