自学React 入门
刚开始学习React, 读了官网和别人的一些博客,总结了一部分内容,记录一下。有错误欢迎指正。。。
一、自定义组件需要了解知识
1. 组件分类
React中有两种类型的组件,一种是”方法组件“,一种是”类组件“;
(1). 区别
方法组件:
不具有state状态;只用于展示数据,不做逻辑处理;
不具有render()方法,直接返回JSX对象或null对象;
示例:
function Welcome(props) {
return (
// 此处注释的写法
<div className="shopping-list">
{/* 此处 注释的写法 必须要{}包裹 */}
<h1>Shopping List for {props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
</ul>
</div>
)
}
ReactDOM.render(
<Welcome name="jack" />,
document.getElementById('app')
)
类组件
具有state状态;有业务逻辑,需要操作数据(state);
必须有render()方法;render()方法返回的对象必须有根元素且只能有一个,可以为JSX对象或null对象;
需要在构造方法中使用super(props)才可在组件的后续内容中使用this;
示例:
class ShoppingList extends React.Component {
constructor(props) {
super(props)
}
// class创建的组件中 必须有render方法 且显示return一个react对象或者null
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
</ul>
</div>
)
}
}
(2). 相同点
- 定义的名称首字母均大写;(React通过此来判断是否为一个组件)
- 返回值最好都用()包含;
- 返回值为JSX对象或null对象;
- 都接受父组件传递的props对象属性,且子组件不可修改;
2. 数据对象: props和state
(1). props
- 用于存储父组件传递给子组件的参数;React会将传递的参数转换为对象赋值给props;
- 只读属性;子组件接收父组件的props参数,子组件不可修改;
- 实例化:①. 从父组件传递过来,在子组件中通过super(props)实例化;②. 通过组件类的静态属性defaultProps来初始化props;(组件名.defaultProps = {color: 'red'}
自学React 入门的更多相关文章
- react入门(3)
在第一篇文章里我们介绍了jsx.组件.css写法 点击查看react入门(1) 第二篇文章里我们介绍了事件.this.props.children.props....other.map循环 点击查 ...
- react入门(1)
这篇文章也不能算教程咯,就算是自己学习整理的笔记把. 关于react一些相关的简介.优势之类的,随便百度一下一大堆,我就不多说了,可以去官网(http://reactjs.cn/)看一下. 这片主要讲 ...
- react入门(2)
接着上一次的讲,如果没有看过上一篇文章的小伙伴可以先看一下http://www.cnblogs.com/sakurayeah/p/5807821.html React事件 可以先看一下官网讲解的内容h ...
- react入门(4)
首先还是来回顾一下前三篇讲的内容 react入门(1): jsx,组件,css写法 react入门(2):事件,this.props.children,props,...other react入门(3 ...
- React 入门实例教程(转载)
本人转载自: React 入门实例教程
- React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- React入门 (1)—使用指南(包括ES5和ES6对比)
前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
- React入门简单实践
参考文献: 1.React入门示例教程——阮一峰 2.React仅仅只是你的界限 React主要的优点就是增量更新(虚拟DOM)和组件化(状态机). <!DOCTYPE html> < ...
- 2015年最热门前端框架React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
随机推荐
- React之react-redux
react-redux相关概念及设计思想介绍 1.react-redux 将所有组件分为两大类 UI组件(负责UI的呈现) 和 容器组件(负责管理数据和逻辑). 2.UI组件特点 只负责UI的呈现,不 ...
- 一张图了解.Net Core和.NetFx和.Net Standard和Xamarin关系
一张图了解 .Net Core和.Net Framework和.Net Standard和Xamarin关系 总结 .NET Standard是一项API规范,每一个特定的版本,都定义了必须实现的基类 ...
- Linux下Nodejs安装(最新版)
Linux安装最新版Node.js 由于直接yum安装的nodejs版本太低,所以本篇文章向大家介绍在 Linux 上安装 Node.js 最新版的方法. 安装环境 本机系统:CentOS Linux ...
- Apache JMeter HTTPS(S) Test Script Recorder
参考Apache官网资料:http://jmeter.apache.org/usermanual/jmeter_proxy_step_by_step.pdf 1. 进入apache-jmeter-2. ...
- CF1027D Mouse Hunt 思维
Mouse Hunt time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...
- Atcoder C - +/- Rectangle(思维+构造)
题目链接:http://agc016.contest.atcoder.jp/tasks/agc016_c 题解:挺简单的构造,很容易想到的构造方法就是(h*w)的小矩阵里其他值赋值为1,最后一个赋值为 ...
- Codeforces Round #383 (Div. 2)D. Arpa's weak amphitheater and Mehrdad's valuable Hoses(dp背包+并查集)
题目链接 :http://codeforces.com/contest/742/problem/D 题意:给你n个女人的信息重量w和美丽度b,再给你m个关系,要求邀请的女人总重量不超过w 而且如果邀请 ...
- js中的循环方式及各种遍历的方法
for循环 1.for有三个表达式:①声明循环变量:②判断循环条件:③更新循环变量:三个表达式之间,用;分割, for循环三个表达式都可以省略,但是两个“;”缺一 不可. 2.for循环的执行特点: ...
- C++临时变量的回顾思考以及librdkafka设置回调函数注意点
1 生命周期 如果仅仅是临时变量,并没有调用new来在堆上创建空间,那么注意 : 生命周期仅在该作用域中,即声明该临时变量的{}中: 2 使用(librdkafka C++回调使用) 在创建临时变量后 ...
- redis持久化的两种方式RDB和AOF
原文链接:http://www.cnblogs.com/tdws/p/5754706.html Redis的持久化过程中并不需要我们开发人员过多的参与,我们要做的是什么呢?除了深入了解RDB和AOF的 ...
- react入门(3)