React学习笔记一：入门知识概览
一：安装react
1:直接下载react源码包，把需要用到的js文件引入自己的页面即可。
2:BootCDN 的 React CDN 库：
在页面代码中导入即可：
<head>
<meta charset="UTF-8" />
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
二：JSX
React 使用 JSX 来替代常规的 JavaScript。
我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。
在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。
React 推荐使用内联样式：即先定义一个样式变量，然后在指定元素样式时 style=styleVar即可。
注释：{/* 注释 */}
JSX允许在html标签之间插入数组，并且会自动遍历数组。
JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签：
要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名：
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));
要渲染 React 组件，只需创建一个大写字母开头的本地变量：
var MyComponent = React.createClass({/*...*/});
ReactDOM.render(myElement, document.getElementById('example'));
三：组件
1）创建自定义组件
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello World！</h1>;
}
});
React.createClass 方法用于生成一个组件类 HelloMessage。
原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头。
2）使用组件
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
<HelloMessage /> 创建组件类实例。
如果我们需要向组件传递参数，可以使用 this.props 对象：
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
3）组件复合
var WebSite = React.createClass({
render: function() {
return (
<div>
<Name name={this.props.name} /> //Name是自定义的组件
<Link site={this.props.site} /> //Link是自定义的组件
</div>
);
}
});
四：状态
React 把组件看成是一个状态机。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不需要操作 DOM）。
每次修改以后，自动调用 this.render 方法，再次渲染组件。
五：参数
state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。
所以有些容器组件需要定义 state 来更新和修改数据， 而子组件只能通过 props 来传递数据。
你可以通过 getDefaultProps() 方法为组件 props 设置默认值：
getDefaultProps: function() {
return {
name: 'Runoob'
};
}
我们可以在父组件中设置 state， 并通过在子组件上使用 props 将其传递到子组件上。
var WebSite = React.createClass({
getInitialState: function() {／／设置默认值
return {
name: "菜鸟教程",
site: "http://www.runoob.com"
};
},
render: function() {
return (
<div>
<Name name={this.state.name} /> //创建子组件实例，把数据传进去
<Link site={this.state.site} />
</div>
);
}
});
var Name = React.createClass({
render: function() {
return (
<h1>{this.props.name}</h1>//使用props获取父组件传进来的参数
);
}
});
var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
});
Props 验证：
使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据（比如：类型不对）时，JavaScript 控制台会抛出警告，前端也不会产生输出。
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
验证器有：
propTypes: {
// 可以声明 prop 为指定的 JS 基本数据类型，默认情况，这些数据是可选的
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
// 可以被渲染的对象 numbers, strings, elements 或 array
optionalNode: React.PropTypes.node,
// React 元素
optionalElement: React.PropTypes.element,
// 用 JS 的 instanceof 操作符声明 prop 为类的实例。
optionalMessage: React.PropTypes.instanceOf(Message),
// 用 enum 来限制 prop 只接受指定的值。
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
// 可以是多个对象类型中的一个
optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
]),
// 指定类型组成的数组
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
// 指定类型的属性构成的对象
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
// 特定 shape 参数的对象
optionalObjectWithShape: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
}),
// 任意类型加上 `isRequired` 来使 prop 不可空。
requiredFunc: React.PropTypes.func.isRequired,
// 不可空的任意类型
requiredAny: React.PropTypes.any.isRequired,
// 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error('Validation failed!');
}
}
},
六：组件API
- 设置状态：setState：
不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。
setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。
setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。
- 替换状态：replaceState
- 设置属性：setProps
props相当于组件的数据流，它总是会从父组件向下传递至所有的子组件中。当和一个外部的JavaScript应用集成时，我们可能会需要向组件传递数据或通知React.render()组件需要重新渲染，可以使用setProps()。
- 替换属性：replaceProps
- 强制更新：forceUpdate
- 获取DOM节点：findDOMNode
- 判断组件挂载状态：isMounted
可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错。
七：组件生命周期
组件的生命周期可分成三个状态：
- Mounting：已插入真实 DOM
- Updating：正在被重新渲染
- Unmounting：已移出真实 DOM
生命周期的方法有：
componentWillMount 在渲染前调用,在客户端也在服务端。
componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。
八：异步通信
React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据后，可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。
当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。
React学习笔记一：入门知识概览的更多相关文章
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- React学习笔记(一) 基础知识
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我. React的基 ...
- AngularJs学习笔记1——入门知识
1.什么是AngularJs AngularJs 诞生于2009年,由Misko Hevery 等人创建,后被Google收购,是一个优秀的Js框架,用于SPA(single pag ...
- UnityShader学习笔记1 — — 入门知识整理
注:资料整理自<Unity Shader入门精要>一书 一.渲染流程概念阶段: 应用阶段:(1)准备好场景数据:(如摄像机位置,物体以及光源等) (2)粗粒度剔除(Culling): ...
- React学习笔记（一）- 入门笔记
React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...
- python学习笔记--Django入门四 管理站点--二
接上一节 python学习笔记--Django入门四 管理站点 设置字段可选 编辑Book模块在email字段上加上blank=True,指定email字段为可选,代码如下: class Autho ...
- WebSocket学习笔记——无痛入门
WebSocket学习笔记——无痛入门 标签: websocket 2014-04-09 22:05 4987人阅读 评论(1) 收藏 举报 分类: 物联网学习笔记(37) 版权声明:本文为博主原 ...
- MyBatis:学习笔记(1)——基础知识
MyBatis:学习笔记(1)--基础知识 引入MyBatis JDBC编程的问题及解决设想 ☐ 数据库连接使用时创建,不使用时就释放,频繁开启和关闭,造成数据库资源浪费,影响数据库性能. ☐ 使用数 ...
- React学习笔记--程序调试
React学习笔记 二 程序调试 前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...
- C#学习笔记（基础知识回顾）之值类型与引用类型转换（装箱和拆箱）
一:值类型和引用类型的含义参考前一篇文章 C#学习笔记(基础知识回顾)之值类型和引用类型 1.1,C#数据类型分为在栈上分配内存的值类型和在托管堆上分配内存的引用类型.如果int只不过是栈上的一个4字 ...
随机推荐
- Button 在布局文件中定义监听器，文字阴影，自定义图片，代码绘制样式，添加音效的方法
1.Button自己在xml文件中绑定监听器 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/andro ...
- 修改服务的运行权限，解决SVN Post Commit问题
先来看一下错误现象 之前在Windows Server中安装了VirtualSVN Server,然后设置了Post Commit Hooks,在提交代码到版本库之后,将代码check到本地的一个Se ...
- SVG.js 图案使用和use引用
一.SVG.Pattern 图案设置 var draw = SVG('svg1').size(300, 300); //SVG.Pattern 图案设置 var pattern = draw.patt ...
- 单因素方差分析（One Way ANOVA）
Analysis of variance (ANOVA) is a collection of statistical models and their associated estimation p ...
- warning: LF will be replaced by CRLF in dubbo-demo-api/pom.xml.
今天使用git add .的时候出现了一个错误. 错误如下: 解决方案: $ rm -rf .git // 删除.git $ git config --global core.autocrlf fal ...
- [leetcode]Spiral Matrix @ Python
原题地址:https://oj.leetcode.com/problems/spiral-matrix/ 题意: Given a matrix of m x n elements (m rows, n ...
- window.location属性用法及解决一个window.location.search为什么为空的问题
通常用window.location该属性获取页面 URL 地址: 1.什么是window.location? 比如URL:http://b.a.com:88/index.php?name=kang& ...
- Ios开发之协议protocol
Protocol是ios开发中的一个难点也是一个重点,要想使用好,或者理解好它,可能需要时间的累积.今天我们就通过一个例子来简单的看一下,怎么样使用protocol. 我们今天用的例子就是模拟电脑插入 ...
- php 获取远程图片长宽和大小
/***获取远程图片的宽高和体积大小 ** @param string $url 远程图片的链接 * @param string $type 获取远程图片资源的方式, 默认为 curl 可选 frea ...
- 前后端协调处理checkbox
需求:页面属于一个弹出窗体,查询结果,用checkbox展示,选择后,把选中的结果传递给调用页面. 由于要取得后端写的checkbox控件的值,所以在后端处理最后的提交事件,用这个语句把结果传递到页面 ...