react 详细解析学习笔记
React的介绍:
React来自于Facebook公司的开源项目
React 可以开发单页面应用 spa(单页面应用)
react 组件化模块化 开发模式
React通过对DOM的模拟(虚拟dom),最大限度地减少与DOM的交互 (数据绑定)
react灵活 React可以与已知的库或框架很好地配合。
react 基于jsx的语法,JSX是React的核心组成部分,它使用XML标记的方式去直接声明界面, html js混写模式
搭建React开发环境之前的准备工作。
1、必须安装nodejs 注意:安装nodejs稳定版本
2、安装cnpm用cnpm替代npm
地址:http://npm.taobao.org/
安装cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
3、用yarn替代npm
yarn的安装:
第一种方法:参考官方文档https://yarn.bootcss.com/
第二种方法:cnpm install -g yarn 或者 npm install -g yarn
搭建React开发环境
第一种方法(老-现在推荐):
https://reactjs.org/docs/create-a-new-react-app.html
1、必须要安装nodejs 注意:安装nodejs稳定版本 nodejs版本:v8.11.2 npm版本:v5.6.0
2.安装脚手架工具 (单文件组件项目生成工具) 只需要安装一次
npm install -g create-react-app / cnpm install -g create-react-app
3.创建项目 (可能创建多次)
找到项目要创建的目录:
create-react-app reactdemo
4.cd 到项目里面
cd reactdemo
npm start yarn start运行项目
npm run build yarn build 生成项目
第二种方法(新-未来推荐):
https://reactjs.org/docs/create-a-new-react-app.html
1、必须要安装nodejs 注意:安装nodejs稳定版本 nodejs版本:v8.11.2 npm版本:v5.6.0
2.安装脚手架工具并创建项目
找到项目要创建的目录执行:
npx create-react-app reactdemo
4.cd 到项目里面
cd reactdemo
npm start 运行项目(调试)
npm run build 生成项目(发布)
npx介绍:
npm v5.2.0引入的一条命令(npx),引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验。
详情:
http://www.phonegap100.com/thread-4910-1-1.html
npx create-react-app reactdemo这条命令会临时安装 create-react-app 包,命令完成后create-react-app 会删掉,不会出现在 global 中。下次再执行,还是会重新临时安装。
npx 会帮你执行依赖包里的二进制文件。
再比如 npx http-server 可以一句话帮你开启一个静态服务器
manifest.json 文件简介:
https://lavas.baidu.com/mip/doc/engage-retain-users/add-to-home-screen/introduction
允许将站点添加至主屏幕,是 PWA 提供的一项重要功能,当前 manifest.json 的标准仍属于草案阶段,Chrome 和 Firefox 已经实现了这个功能,微软正努力在 Edge 浏览器上实现,Apple 目前仍在考虑中
super关键字:
参考:http://www.phonegap100.com/thread-4911-1-1.html
Es6中的super可以用在类的继承中,super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。
class Person {
constructor (name) {
this.name = name;
}
}
class Student extends Person {
constructor (name, age) {
super(); // 用在构造函数中,必须在使用this之前调用
this.age = age;
}
}
为什么官方的列子里面写个super(props):
只有一个理由需要传递props作为super()的参数,那就是你需要在构造函数内使用this.props
那官方提供学习的例子中都是写成super(props),所以说写成super(props)是完全没问题的,也建议就直接这样写。
ReactJSX语法
JSX就是Javascript和XML结合的一种格式。React发明了JSX,可以方便的利用HTML语法来创建虚拟DOM,当遇到<
,JSX就当作HTML解析,遇到{
就当JavaScript解析.
1、所有的模板要被一个根节点包含起来,在render函数中return返回的只能包含一个顶层标签,否则也会报错
2、模板元素不要加引号
3、JSX基本语法规则,遇到HTML标签(以<开头),就用HTML规则解析;遇到代码块(以{开头),就用JS规则解析
4、绑定属性注意:
class 要变成 className
for 要变成 htmlFor
style属性和以前的写法有些不一样
<div style={{'color':'blue'}}>{this.state.title}</div>
<div style={{'color':this.state.color}}>{this.state.title}</div>
5、循环数据要加key
6、组件的构造函数中一定要注意 super
子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象
constructor(props){
super(props); /*用于父子组件传值 固定写法*/
this.state={
userinfo:'张三'
}
}
7、组件名称首字母大写、组件类名称首字母大写
8、react解析html
<div dangerouslySetInnerHTML={{__html: this.state.list.htmlStr}}> </div>
9、条件判断的四种写法
用三元表达式, 使用dom元素变量,直接调用函数,使用逻辑运算符,利用即时执行函数
class HelloWorld extends React.Component{
render(){
return <p>Hello {
(function(obj){
if(obj.props.name){
return obj.props.name;
}else{
return "World";
}
}(this))
}</p>
}
}
Fragment标签
加上最外层的DIV,组件就是完全正常的,但是你的布局就偏不需要这个最外层的标签怎么办?比如我们在作Flex
布局的时候,外层还真的不能有包裹元素。这种矛盾其实React16已经有所考虑了,为我们准备了<Fragment>
标签。
在以类继承的方式定义的组件中,为了能方便地调用当前组件的其他成员方法或属性(如:this.state),通常需要将事件处理函数运行时的 this 指向当前组件实例。
引入方式:
import React,{Component,Fragment } from 'react'
然后把最外层的<div>
标签,换成<Fragment>
标签
setState
React是禁止直接操作state的,虽然上面的方法也管用,但是在后期的性能优化上会有很多麻烦
绑定事件处理函数this的几种方法:
第一种方法:
run(){
alert(this.state.name)
}
<button onClick={this.run.bind(this)}>按钮</button>
第二种方法: 构造函数中改变
this.run = this.run.bind(this);
run(){
alert(this.state.name)
}
<button onClick={this.run>按钮</button>
第三种方法:
run=()=> {
alert(this.state.name)
}
<button onClick={this.run>按钮</button>
React中的组件: 解决html 标签构建应用的不足。
获取表单的值
(获取点击的某个键的key值 e.keyCode)
1、监听表单的改变事件 onChange
2、在改变的事件里面获取表单输入的值 ref获取
3、把表单输入的值赋值给username this.setState({})
4、点击按钮的时候获取 state里面的username this.state.username
组件传值:
使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入。
父子组件:组件的相互调用中,我们把调用者称为父组件,被调用者称为子组件
父子组件传值:
一,父组件给子组件传值
1.在调用子组件的时候定义一个属性 <Header msg='首页'></Header>
2.子组件里面 this.props.msg
说明:父组件不仅可以给子组件传值,还可以给子组件传方法,以及把整个父组件传给子组件。
记住一点:父组件向子组件传递内容,靠属性的形式传递。
父组件主动获取子组件的数据
1、调用子组件的时候指定ref的值 <Header ref='header'></Header>
2、通过this.refs.header 获取整个子组件实例
二,子组件给父组件传值:
defaultProps:父子组件传值中,如果父组件调用子组件的时候不给子组件传值,可以在子组件中使用defaultProps定义的默认值
propTypes:验证父组件传值的类型合法性,定义父组件给子组件传值的类型
1、引入import PropTypes from 'prop-types';
2、类.propTypes = {
name: PropTypes.string
};
都是定义在子组件里面
约束性和非约束性组件:
非约束性组:<input type="text" defaultValue="a" /> 这个 defaultValue 其实就是原生DOM中的 value 属性。
这样写出的来的组件,其value值就是用户输入的内容,React完全不管理输入的过程。
约束性组件:<input value={this.state.username} type="text" onChange={this.handleUsername} />
这里,value属性不再是一个写死的值,他是 this.state.username, this.state.username 是由 this.handleChange 负责管理的。
这个时候实际上 input 的 value 根本不是用户输入的内容。而是onChange 事件触发之后,由于 this.setState 导致了一次重新渲染。不过React会优化这个渲染过程。看上去有点类似双休数据绑定
react获取服务器APi接口的数据:
react中没有提供专门的请求数据的模块。但是我们可以使用任何第三方请求数据模块实现请求数据
1、axios https://github.com/axios/axios axios的作者觉得jsonp不太友好,推荐用CORS方式更为干净(后端运行跨域)
1、安装axios模块npm install axios --save / npm install axios --save
2、在哪里使用就在哪里引入import axios from 'axios'
3、看文档使用
Var api='';
axios.get(api)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
2、fetch-jsonp https://github.com/camsong/fetch-jsonp
1、安装 npm install fetch-jsonp --save
2、import fetchJsonp from 'fetch-jsonp'
3、看文档使用
fetchJsonp('/users.jsonp')
.then(function(response) {
return response.json()
}).then(function(json) {
console.log('parsed json', json)
}).catch(function(ex) {
console.log('parsing failed', ex)
})
3、其他请求数据的方法也可以...自己封装模块用原生js实现数据请求也可以...
React生命周期函数:
组件加载之前,组件加载完成,以及组件更新数据,组件销毁。
触发的一系列的方法 ,这就是组件的生命周期函数
组件加载的时候触发的函数:
constructor 、componentWillMount、 render 、componentDidMount
组件数据更新的时候触发的生命周期函数:
shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate
你在父组件里面改变props传值的时候触发的:
componentWillReceiveProps
组件销毁的时候触发的:
componentWillUnmount
必须记住的生命周期函数:
*加载的时候:componentWillMount、 render 、componentDidMount(dom操作)
更新的时候:componentWillUpdate、render、componentDidUpdate
*销毁的时候: componentWillUnmount
react路由的配置:
1、找到官方文档 https://reacttraining.com/react-router/web/example/basic
2、安装 cnpm install react-router-dom --save
3、找到项目的根组件引入react-router-dom
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
4、复制官网文档根组件里面的内容进行修改 (加载的组件要提前引入)
<Router>
<Link to="/">首页</Link>
<Link to="/news">新闻</Link>
<Link to="/product">商品</Link>
<Route exact path="/" component={Home} />
<Route path="/news" component={News} />
<Route path="/product" component={Product} />
</Router>
exact表示严格匹配
实现js跳转路由:https://reacttraining.com/react-router/web/example/auth-workflow
1、要引入Redirect
2、定义一个flag
this.state = {
loginFlag:false
};
3、render里面判断flag 来决定是否跳转
if(this.state.loginFlag){
return <Redirect to={{ pathname: "/" }} />;
}
4、要执行js跳转
通过js改变loginFlag的状态
改变以后从新render 就可以通过Redirect自己来跳转
url模块来解析url地址 在react里面使用url模块需要安装url模块 cnpm install url --save
import url from 'url';
//获取get传值
console.log(url.parse(this.props.location.search,true));
var query=url.parse(this.props.location.search,true).query;
console.log(query)
未完待续。。。
react 详细解析学习笔记的更多相关文章
- 最新 React 源码学习笔记
最新 React 源码学习笔记 v17.x.x 框架架构 核心算法 设计模式 编码风格 项目结构 为什么出现 解决了什么问题 有哪些应用场景 refs https://github.com/learn ...
- Pytorch CNN网络MNIST数字识别 [超详细记录] 学习笔记(三)
目录 1. 准备数据集 1.1 MNIST数据集获取: 1.2 程序部分 2. 设计网络结构 2.1 网络设计 2.2 程序部分 3. 迭代训练 4. 测试集预测部分 5. 全部代码 1. 准备数据集 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 非常详细GC学习笔记
转载:http://blog.csdn.net/fenglibing/article/details/6321453 这是我公司同事的GC学习笔记,写得蛮详细的,由浅入深,循序渐进,让人一看就懂,特转 ...
- JProfiler使用详细教程学习笔记
JProfiler学习笔记 推荐文章:JProfiler 入门教程 一.安装JProfiler 从http://www.ej-technologies.com/下载5.1.2并申请 ...
- React官网学习笔记
欢迎指导与讨论 : ) 前言 本文主要是笔者在React英文官网学习时整理的笔记.由于笔者水平有限,如有错误恳请指出 O(∩_∩)O 一 .Tutoial 篇 1 . React的组件类名的首字母必须 ...
- 干货分享:互联网运营 学习SEO从零开始 SEO深度解析学习笔记
最近在自学SEO,互联网运营,把做的笔记干货分享给大家啊! 希望能帮到大家,如有好的建议可以关注我[磨人的小妖精]或留言,大家一起探讨. 之前还写过一篇文章互联网运营+SEO:推荐必看的5本书籍,学习 ...
- sql优化详细介绍学习笔记
因为最近在面试,发现sql优化这个方面问的特别特别的多.之前都是零零星星,不够全面的了解一点,刚刚在网上查了一下,从 http://blog.csdn.net/zhushuai1221/article ...
- maclean-【性能调优】Oracle AWR报告指标全解析 学习笔记
原文链接:http://www.askmaclean.com/archives/performance-tuning-oracle-awr.html AWR小技巧 手动执行一个快照: Exec dbm ...
随机推荐
- 浏览器默认样式及reset
写在前面 首先纠正一个易错概念.div并非生来就是块元素,而是每个浏览器都有一套默认的css样式(优先级最低),默认样式里会把div设置成display: block;还有margin,padding ...
- JAVA中对null进行强制类型转换(null可以强转为任意对象,并执行对象的静态方法)
今天很好奇,对null进行强转会不会抛错.做了如下测试得到的结果是, 如果把null强转给对象,是不会抛异常的,本身对象是可以为null的. 但是如果是基本类型,比如 int i = (Integer ...
- Linux_ServicesManagement_RHEL7
目录 目录 Network Manager RHEL7的服务管理systemctl指令 服务的启动停止重载重启 服务的分类 指令选项 Network Manager 注意:network servic ...
- 2018.03.29 python-pandas 数据读取
#数据读取# read_table,read_csv,read_excel #读取普通分隔数据:read_table #可以读取txt,csv import os import pandas as p ...
- mysql: show full processlist 详解
show full processlist 是显示用户正在运行的线程,需要注意的是,除了 root 用户能看到所有正在运行的线程外,其他用户都只能看到自己正在运行的线程,看不到其它用户正在运行的线程. ...
- CentOS7配置NFS网络文件系统
NFS,是Network File System的简写,即网络文件系统.网络文件系统是FreeBSD支持的文件系统中的一种,也被称为NFS. NFS允许一个系统在网络上与他人共享目录和文件.通过使用N ...
- 打印 PRINT
打印 PRINT 字符串和数值类型 可以直接输出. print(1) #out:1 print('a') #out:a 变量 无论什么类型,数值,字符串,列表,字典...都可以直接输出 n = 1 s ...
- Java - Java Mail邮件开发(3)spring +Java Mail + Velocity
1.spring + Java Mail + Velocity 项目结构: 注意:用户包中引入各包的顺序问题.如velocity-2.1. beans.xml <?xml version=&qu ...
- Scrapy 教程(七)-架构与中间件
Scrapy 使用 Twisted 这个异步框架来处理网络通信,架构清晰,并且包含了各种中间件接口,可以灵活的完成各种需求. Scrapy 架构 其实之前的教程都有涉及,这里再做个系统介绍 Engin ...
- HNUSTOJ-1675 Morse Code(DFS+字典序搜索)
1675: Morse Code 时间限制: 2 Sec 内存限制: 128 MB提交: 73 解决: 33[提交][状态][讨论版] 题目描述 摩尔斯电码(英语:Morse Code)是一种时通 ...