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 ...
随机推荐
- 五、RF中UI自动化操作基础
列表分类 1.打开浏览器 Open Browser url browser [ url | browser=firefox | alias=None | remote_url=False | ...
- C:\WINDOWS\system32\drivers\etc\hosts文件的作用
在网络上访问网站,要首先通过DNS服务器把网络域名(www.XXXX.com)解析成XXX.XXX.XXX.XXX的IP地址后,我们的计算机才能访问.要是对于每个域名请求我们都要等待域名服务器解析后返 ...
- http-server 建立 HTTPS 服务
1. 创建证书 进入要建立 HTTPS 服务的目录 openssl genrsa -out key.pem 1024 openssl req -new -key key.pem -out csr.pe ...
- application.events 识别组合键 参考。
https://blog.csdn.net/chinayu2007/article/details/43761277 在窗体上放上ApplicationEvents控件,在OnMessage消息中加入 ...
- JDK7新特性
二进制字面量 数字字面量可以出现下划线 switch语句可以用字符串 泛型简化 异常的多个catch合并 try..with...resource语句 import java.io.FileReade ...
- cannot assign to struct field xxx in map
golang 中对 map 类型中的 struct 赋值报错 type s struct{ name string age int}func main(){ a := map[string]s{ &q ...
- IP子网的划分
一.划分子网的具体步骤 已知192.168.1.0/24,划分8个子网(一个ip划分8个子网,即网络位不再是24位)1100 0000.1010 1000.0000 0001.0000 00001 . ...
- MVC中的cshtml与ASPX的区别
在MVC3中,即可以使用cshtml,也可以使用aspx, 这两者到底有什么区别呢? 越详细越好,如果是用来正式开发,用哪种比较好. --------------------------------- ...
- Vim文本编辑工具
4文本编辑工具Vim Vim是vi的升级版,编辑文本时vi不会显示颜色而vim会显示颜色. 安装vim工具 #yum install –y vim-enhanced Vim有三种模式:一般模式. ...
- python winsound模块
(目标:出现交易下单.结束成交.数据中断等信号的时候,PC 发出声音提醒.) python winsound模块 winsound是Python的内置包,无需下载.可以直接通过 import wins ...