react学习(一)组件
react这个东西,说实话,我刚刚接触一个月不到。感觉这玩意很颠覆我以前的前端开发
比方说,可能,整个项目,并没有一个html文件
比方说,以前我们写前端代码,分的清清楚楚,html里面就是放dom,css里面放样式,js里面放逻辑处理
比方说...
手里头正好在写一个项目,也顺带着看着书,就稍微记一点自己的理解
组件
我觉得这个是react的核心了哇
以前也写组件,毕竟是加快开发的东西,就像雕版印刷最后发展到活字印刷的必然性。组件也是必然的。
可复用很重要,一个项目,甚至多个项目,肯定会有很类似的东西,他们往往只是某部分不同,差不多就这个意思,把不同的地方搞成个变量,恩,差不多就这样理解挺方便的
下面研究下react的组件
/**
* @file
* @author fengying
*/
import React, { PureComponent, PropTypes } from 'react';
import styles from './boxTitle.less'; export default class boxTitle extends PureComponent {
// 定义参数的类型以及是否为必须的,如果这边不是必须就要在defaultProps里面
static propTypes = {
title: PropTypes.string,
icon: PropTypes.bool.isRequired,
}
// 定义非必要的参数的默认值
static defaultProps = {
title: '',
}
// 构造函数,定义默认的state
constructor(props) {
super(props); this.state = {
};
} // 在render()方法执行前执行,只执行一次
componentWillMount() {
} // 在render()方法执行后执行,只执行一次
componentDidMount() {
} // 当组件传入的 props 发生变化时调用,例如:父组件状态改变,给子组件传入了新的prop值。用于组件 props 变化后,更新state。
componentWillReceiveProps(nextProps) {
// this.setState({ });
} // 接受需要更新的props和state,让开发者增加必要的条件判断,让其在需要时更新,不需要时不更新,当方法返回false时,组件不再向下执行生命周期方法
shouldComponentUpdate(nextProps, nextState) {
} // 重新渲染组件刷新前
componentWillUpdate() {
} // 重新渲染组件刷新后
componentDidUpdate() {
} // 组件销毁前(事件回收或者清除定时器等方法)
componentWillUnmount() {
} render() {
const { title, icon } = this.props;
return (
<div className={styles.title}>
{
icon ? <span className={styles.tip} /> : ''
}
{title}
</div>
);
}
}
这个是项目里一个小标题
基本上可以作为一个模板,当然有些方法没用到的,可以删了
总结
生命周期三个状态:
- Mounting:已插入真实 DOM
- Updating:正在被重新渲染
- Unmounting:已移出真实 DOM
状态的处理函数:
- componentWillMount()
- componentDidMount()
- componentWillUpdate(object nextProps, object nextState)
- componentDidUpdate(object prevProps, object prevState)
- componentWillUnmount()
特殊的处理函数:
- componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用,DOM不会二次渲染
- shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用
render里面return的html,用{}包围起来写js代码
state改变,页面会重新渲染
setState方法是异步的,若要在改变state值后进行操作,记得写在回调函数里面
react学习(一)组件的更多相关文章
- React学习笔记 - 组件&Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
- React 学习二 组件
React的一个最大的特点就是组件化的开发模式.今天就来试一下: <!DOCTYPE html> <html> <head> <meta charset=&q ...
- React学习——子组件给父组件传值
//子组件 var Child = React.createClass({ render: function(){ return ( <div> 请输入邮箱:<input onCha ...
- AntDesign(React)学习-15 组件定义、connect、interface
虽然常用的编码用一种即可,但是看别人文档或者示例时,有的写法不熟悉的话看着很不习惯,整理几种实现同一功能的不同写法 1.Dva Connect与@Connect import React, { Pro ...
- React学习——ListView组件
(草稿) 先把代码放上来,再补充说明 <!DOCTYPE html> <html> <head> <title>React ListView</t ...
- AntDesign(React)学习-1 创建环境
目录: AntDesign(React)学习-15 组件定义.connect.interface AntDesign(React)学习-14 使用UMI提供的antd模板 AntDesign(Reac ...
- 【JAVASCRIPT】React学习-如何构建一个组件
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 组件化思想 组件就是 UI + UI 交互逻辑,组件有三个常规map , 分别为state 状态 . props 数据 ...
- 【JAVASCRIPT】React学习- 数据流(组件通信)
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 一 组件通信如何实现 父子组件之间不存在继承关系 1.1 父=>子通信 父组件可以通过 this.refs.xx ...
- 【React】react学习笔记02-面向组件编程
react学习笔记02-面向组件编程 面向组件编程,直白来说,就是定义组件,使用组件. 以下内容则简单介绍下组建的声明与使用,直接复制demo观测结果即可. 步骤: 1.定义组件 a.轻量组件-函 ...
- React 学习(一) ---- React Element /组件/JSX
学习React的时候,你可能听到最多的就是要先学习webpack, babel,要先学会配置然后才能学react 等等,一堆的配置就把我们吓着了,根本就没有心情就学习react了.其实在最开始学习re ...
随机推荐
- 谈谈 C++ 中的右值引用
转自:https://liam0205.me/2016/12/11/rvalue-reference-in-Cpp/ 最近在改 XGBoost 的代码.XGBoost 在代码中使用了很多来自 C++1 ...
- SOJ1022 Uniform Generator
Computer simulations often require random numbers. One way to generate pseudo-random numbers is via ...
- hdu 4803 Poor Warehouse Keeper(贪心+数学)
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u011328934/article/details/26005267 题目链接:hdu 4803 P ...
- Spring Boot Mock单元测试学习总结
单元测试的方法有很多种,比如使用Postman.SoapUI等工具测试,当然,这里的测试,主要使用的是基于RESTful风格的SpringMVC的测试,我们可以测试完整的Spring MVC流程,即从 ...
- virtualbox+vagrant学习-2(command cli)-27-vagrant connect命令
Connect 命令: vagrant connect NAME connect命令通过启用对共享环境的访问来补充share命令.你可以在“vagrant share”部分了解有关vagrant sh ...
- mysql测试数据创建
用存储过程方式创建几十几百万条测试数据,2核4G里插入1万条,约8.5秒,也就是24小时可以加大约1亿条记录. //创建库,用户create database dbTest;create user ' ...
- layer关闭当前窗口并刷新父窗口
window.parent.location.reload(); var index = parent.layer.getFrameIndex(window.name); parent.layer.c ...
- LeetCode559. Maximum Depth of N-ary Tree
第一次写出了具有迭代和递归的函数,还是有点收获的,虽然题目比较简答 当要对某些对象重复使用时,考虑循环,也就是迭代 当函数可以简化一个重复的操作时,考虑递归,而且就当下一次使用这和函数的结果已经有啦, ...
- cloudstack-kvm-libvirtd
2.4.libvirtd日志和VM的日志 在运行libvirtd的时候,我们需要获得lbivirtd的运行信息.所以我们需要找到他的日志文件.一般情况下,它是在/var/log/libvirt/lib ...
- 更改KVM虚拟机root的密码
今天在使用qemu-kvm安装一个虚拟机,因为已经有一个虚拟机的image文件(qcow2格式的),所以创建虚拟机很简单,直接通过以下命令从image启动就行了. qemu-kvm -cpu host ...