reactjs可以用react语法编写交互效果,react native可以开发app,函数式编程,16-2版本
vue面向用户端,react可以写业务复杂度
1、引入.js文件来使用
2、通过脚手架工具来编码:webpack,gulp,
create-react-app官方提供的脚手架工具,
第一步:安装
npm install -g create-react-app
第二步:新建文件夹
create-react-app demo
第三步:运行
cnpm start
整理src文件
在App.js中,引入react,声明App这个类,
extends继承Component//把react组件继承了
render渲染模板页面 里面有返回的对象,里面写模板(元素)只能有一个根组件
使用一个组件
1、用Home.js,导入,声明,导出
2、在App.js中导入,挂载
class类的写法
必须写super,继承this
1、绑定数组
vue用的是v-for,react用的是.map映射
arr:[1,2,3,4,5,6]
<ul>
{
this.state.arr.map((value,index)=>{
return <li key={index}>{value}</li>
})
}
</ul>
2、绑定数组加对象,不能用foreach,因为foreach没有返回值
ele:[
{
e:<span>1</span>
},
{
e:<span>2</span>
},
{
e:<span>3</span>
},
]
{this.state.ele.map(
function(value,index){
return(
<li key={index}>{value.e}</li>
)
}
)}
动态绑定属性
1、绑定元素的属性
title:'我是div'
<div title={this.state.title}>//vue用的是:title
2、绑定class
<span className='bg'></span>//vue用的是class
3、可以用三元运算符
<div className={true?this.state.isadd:''}></div>
在return和function中用if else
注意:label中有for属性
元素的html中的for属性要写htmlFor
4、动态绑定行内样式
<div style={{width:'3rem', height:'3rem'}}></div>
5、或用动态绑定属性
ba:{
color:'red'
}
<div style={this.state.ba}></div>
图片的引入
本地路径:
方法一、
<img src={require("../assets/image/logo.svg")} alt=''/>
方法二、
import imgs from '../assets/image/logo.svg'
<img src={imgs} alt=''></img>
引入远程路径
this.state={
imgsrc:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1055727654,337004439&fm=27&gp=0.jpg'
}
<img src={this.state.imgsrc} alt=''/>
react里面的事件
vue用的是v-on @click
react用onClick
不能直接绑定在元素上
要写定义事件执行的方法
事件的写法
1、
<button onClick={this.btnClick.bind(this)}>按钮</button>
btnClick(){
console.log(this)
//这样就可以操作当前组件 通过this
}
2、
<button onClick={this.btnClick2}>按钮2</button>
btnClick2=()=>{
console.log(this);//箭头函数直接获取this
}
3、
btnClick3(){
console.log(this);
}
this.btnClick3=this.btnClick3.bind(this);在constructor
获取事件参数
<button onClick={this.Sendmsg.bind(this,1)}>调用事件传参</button>
获取事件对象,可以通过事件的对象获取dom元素对象
<button onClick={this.getmsg}>1</button>
getmsg(e){
console.log(e.target)
}
键盘事件的执行对象
<input type="text" onKeyPress={this.premsg}/>
premsg=(e)=>{
console.log(e.which || e.keyCode);
}
给元素设置自定义属性
<input type="text" data-id="123" onKeyPress={this.premsg}/>
let elprop=ele.getAttribute("data-id");
console.log(elprop)
表单元素
react里面没有数据双向,自己写数据双向
react里面设置数据,用setState
<li><label htmlFor="id">账号:</label><input type="text" onChange={this.changId} value={this.state.id}/></li>
<li><label htmlFor="pwd">密码:</label><input type="pwd" onChange={this.changpwd} value={this.state.pwd}/></li>
this.state = {
id:"",
pwd:""
};
changpwd=(e)=>{
console.log(e.target)
let ele=e.target;
let val=ele.value;
this.setState({
pwd:val
})
}
通过onChange监听,手动通过setState设置值,实现双向绑定
ref获取dom元素节点
<button onClick={this.gerEle}>获取ref获取dom元素节点</button>
<div ref="block">111</div>
gerEle=()=>{
let ele=this.refs.block;
console.log(ele);
}
在表单元素中,后台操作元素,其中单选框和复选框,用的是事件传参(传递索引)其他的如option,text,textarea用的是e.target实现双向绑定
组件传值
-
父组件给子组件传值(属性和方法)
通过属性传递,
子组件通过 this.props接收 -
子组件获取父组件的整个对象
obj={this}
this.props.obj -
父组件获取整个子组件的方法和属性
ref
-
对传过来的值进行约束
安装prop-types
cnpm install prop-types --save
导入
import PropTypes from 'prop-types'
使用
组件.propTypes={
id:PropTypes.string
}
mockjs虚拟数据
拦截ajax请求
安装、导入、使用
和vue中的使用一样
要在index.js中引入Mock
require('./Mock/mock')
react加载本地json文件,要放在public里面
axios是cors请求,fetch-jsonp是jsonp请求
fetch-jsonp
componentDidMount(){
var api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20";
fecthjsonp(api).then((res)=>{
return res.json();
}).then((res)=>{
console.log(res)
}).catch((err)=>{
console.log(err);
})
}
axios
componentDidMount(){
//异常处理,抓异常
try{
axios.get("/list").then((res)=>{
console.log(res)
})
}
catch(err){
throw err;
}
}
react生命周期
componentWillMount渲染之前
componentDidMount渲染之后
render开始渲染元素
shouldComponentUpdate确认是否修改
componentWillUpdate修改之前
componentDidUpdate修改之后
componentWillReceiveProps属性改变
componentWillUnmount卸载
路由
安装路由
cnpm react-router-dom --save
配置路由出口
<Router></Router>
配置路由入口
<Link to="/My">My</Link>
配置路由
<Route path='/My' component={My} exact></Route>//component为小写,exact为严格配置模式
路由传参
<Route path='/News/:uid' component={News} exact></Route>
<Link to="/News/1">News</Link>
动态路由传参
<Link to={"/News/"+this.state.id}>News</Link>
<Link to={`/News/${this.state.id}`}>News</Link>
get传值
<Link to="/My/?id=1&name=ha">My</Link>
解析url
cnpm install url --save
导入
let data=url.parse(lourl,true).query;
路由的跳转
在父路由中导入
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
子路由跳转父路由,子路由与子路由之前的跳转,使用编程式路由
this.props.history.push('/')
安装sass,使用sass
react抽取配置文件
cnpm install node-sass-chokidar --save
cnpm install node-sass --save
“scripts”:中加入
“build-css”: “node-sass-chokidar src/ -o src/”,
“watch-css”: “npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive”,
cnpm run watch-css