React框架

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实现双向绑定
组件传值

1. 父组件给子组件传值（属性和方法）
   通过属性传递，
   子组件通过 this.props接收

2. 子组件获取父组件的整个对象

   obj={this}
   this.props.obj

3. 父组件获取整个子组件的方法和属性

   ref

4. 对传过来的值进行约束

安装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