1 react环境搭建
npm i yarn --推荐使用yarn
npm i -g create-react-app --安装react脚手架
cd react
create-react-app test --创建react框架
cd 到test里可以 npm start
react基于jsx语法jsx是react的核心组成部分
2 react目录结构
mainifest是pwa提供的一项重要功能(允许将站点添加到主屏幕)
在组件中里面的constructor构造函数里面要写super()
super指代父类的实例(父类的this对象)。子类必须在constructor里调用super,因为子类里没有自己的
this对象,而是继承父类的this对象,不调用就得不到,言简意赅的话就是
如果想用this 前面必须要有super()
如果要做父子组件传值的话super和constructor里要带参数
3
绑定属性注意 class -》className
for -》HTMLFor
行内样式写style style={{“color”:“red”}}
--一条横线分割线 jsx语法支持list2:[
const result = this.state.list.map(function(value,key){
return (
- {value.title}
)
}) --循环这么写render里调用就好4
函数只要在constructor下面下就可并且不用在末尾添加逗号
click me调用函数不需要加 ##()代表执行###
<button onClick={this.setMsg.bind(this,‘this is 1’)}>click me //函数里面有参数的话
要这么绑定5事件对象:在触发dom上的某个事件时,会产生一个对象event。这个对象包含着所有与事件有关的
信息。event.target可以获取当前的dom节点通过ref获得dom节点和vue中相同用法
双向绑定-1、监听表单改变的值 2、在改变的事件中获取表单的值3、把表单输入的值赋值给username
4、点击按钮实现功能
e.preventDefault() //阻止表单默认提交其他会用到的事件:onKeyUp键盘抬起 onKeyDown onKeyPress
真正的完全数据双向绑定-model改变view view改变反过来影响model
后面这半句只要在填一个{this.state.username}就可以了***getAttribute(idname) 利用这个方法可以获得自定义id的属性
6
react并不像vue是MVVM框架7,8做了个todolist回顾之前知识
9保存缓存代办和办完的数据
现在es6里的window是省略的默认就是指向Window
localStorage.setItem()
localStorage.getItem()10
react中的组件:解决HTML标签构建应用不足父组件传值给子组件
父:
子:{this.props.titie}
父组件传函数
父:
子:onClick={this.props.run}
父组件转组件给子组件
父:
子:{this.props.new.list/run}
自组件传值到父组件
子:{this.props.run.bind(this,‘123’)}
父:run=(value)=>{alert(value)}父组件主动获取子组件的数据
父:
子:{this.refs.test.state…}子组件传值给父组件的话
**在父组件中写个函数(函数中接收值),然后传到子组件中,子组件调用这个函数在这个函数中传值从而把值送到父组件那里
实现子组件向父组件传值11、
defaultProps:父给子传值时如果不传值,子组件的默认值
在子组件末尾写
类名.defaultProps = {
list:‘this is a default value’
}propTypes:验证父组件传值合法性,如果传过去的数值不是对应的类型控制台提示warning
首先插入 import PropTpyes from ‘prop-type’
在子组件里面写
leiming.propType = {
list:PropType.string //规定接受的list必须是string类型
}12、
react中没有提供专门的请求数据的模块,但可以通过第三方请求书模块实现数据请求
axios是ajax ajax不止axios
ajax:
本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案
JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务
axios:
从 node.js 创建 http 请求
支持 Promise API
客户端支持防止CSRF
提供了一些并发请求的接口(重要,方便了很多的操作)
$.ajax({
type: ‘POST’,
url: url,
data: data,
dataType: dataType,
success: function () {},
error: function () {}
});axios({
method: ‘post’,
url: ‘/user/12345’,
data: {
firstName: ‘Fred’,
lastName: ‘Flintstone’
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});**域名端口协议三个里面有任意一个不同就引起跨域,
跨域就获取不到数据 ,所以要求后台接口允许跨域
(我们设置这个后台服务器允许跨域就可以了,就从这个服务器里接收数据,
这样也不会影响跨域和同源的策略)react用axios就行
npm i axios
import axios from ‘axios’onclick触发函数时
axios.get(’/api/123’).then(()=>{}).catch((err)=>{console.log(err)})
还是要这样写的一样13、react生命周期函数
组件加载的时候触发的函数:
constructor、componentWillMount、render、componentDidMount
组件更新的时候触发的函数:
shouldComponentUpdate(默认返回true不然不更新数据)该函数可以带入两个函数输出分别是变化前后的值
、componentWillUpdate、render、componentDidUpdate
在父组件里改变props传值的时候触发:
componentWillReceiveProps
组件销毁时触发
componentWillUnmount***==v-show
{
this.state.flag?:’’
}14、react路由
npm i react-router-dom
引入 import { HashRouter, Route,Link } from ‘react-router-dom’;
HashRouter是匹配路由相当于router-view
HashRouter里包裹着Route Route就指明了组件的路由 //注意exact
*** exact是严格模式及/user/ 匹配不到/user/qwe 不加严格模式可以匹配到***
Link相当于router-link15
一个页面跳转到另一个页面
1、get传值
2、动态路由
3、localStorage
to={
/half/${value.todo}
} to用{}括起来是js语法用"“括起来是HTML语法
---这个包起来是es6模板字符串 因为拿过来的数据value.todo是字符串形式的 在
这个符号里是模板字符串加上${}让他知道这个是从外部去的值 --就像在后台写sql语言一样
to=”’/half/’ + value.todo" 也可以这么写那个vue里的那个动态路由到不同的页面是
这是用get方法跳转也可以实现动态路由的话和vue一样 获取动态路由值{this.props.match.params.aid}
get传值获得路由值{this.props.location.search}16、
每行保留3个图片或者其他的东西,把图片width设置成33.3%,其他保留4张或者其他的以此类推
box-sizing:border-box 就是让该标签的边框就是看到的部分,跟padding,margin没关系,常用于图片之前有间隙的设置
双层循环map((value,key)=>{
return ({value.list.map((v,k)=>{})})
})
有时看到获取数据的时候res.data.result[0] 会有这么一个result[0]因为这个数组返回的是数组
你要去第几个数组的值,或者就一个,你打印一下props就可
请求完的数据可以放到state里面
***如果想动态路由对应不同的界面,先拿到对应的id–this.props.match.params.id
前提是有对应的接口,且允许跨域接收(你在axios的时候get一个api,后台服务器也会传一个api这是我们
常规的操作,这是同域的)然后axios写一个api就好了(‘http://getdata/’+{this.props.match.params.id})
然后componentDidMount时调用获取对应数据就好
vue中通过v-html解析HTML标签(就是请求来的json数据里有HTML标签)
react里的话
通过dangerouslySetInnerHTML来解析
如果没有用map渲染页面而是单单用数据渲染页面 render会在state有值时改变,值变化后再执行一次 所以有些
获取api的会在第一次的时候报错not found 只需加个判断条件就好
{this.state.list.img?<img src={${api}${aid}
}/>:""}router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
//这里判断用户是否登录,验证本地存储是否有token
if (!localStorage.token) { // 判断当前的token是否存在
next({
path: ‘/login’,
query: { redirect: to.fullPath } //to.fullPath是重点
})
} else {
next()
}
} else {
next() // 确保一定要调用 next()
}
})
------------------------------用户没登录进页面跳回登录页面
通过export方式导出,在导入时要加{ },export default则不需要 {}里的必须是命名的不能自己取,和导出的一样
因为export可以有很多个,而export default只能有一个所以 {}里要用导出的名,不然他不知道你引用的那个js跳转路由的话比如登录 在react-router-dom 里插入Redirect
if(this.state.current){return < Redirect to={{pathname:’/’}}/>} //需要设置一个current判断是Y or N
明天先看css 大全和布局
Route 或Link嵌套在div等标签里,在跳转页面的同时会保留这Link部分跳转到旁边的Route部分
三点运算符。。。 1、表示传入的参数(不管传入多少个)2、作为拓展运算符(或作为一些计算填充)
21 react UI框架 --Ant Design(主要就是react的组件库