初探React

 

一、安装

 首先，根据官网写的开始安装了脚手架 (这此之前请确保你的计算机的node版本>=6，npm>=5.2)

  creat-react-app my-project  

 

这样，就安装好了。

 

跟vue 一样，也有个入口文件，默认是app.js。

接下来跟着官网敲了下todolist，发现react的双向绑定比较麻烦

二、双向绑定

首先在this.state里面添加value 。(感觉这个和vue的data一样)

然后

 

接着：

这里注意改变state的值是通过 this.setState（a,b）方法 a:state中的属性名，b:给a赋的值

做到这边有一种似曾相识的感觉，然后才发现在做微信小程序的时候也见过。

 相比vue 的v-model 简直不要太麻烦。

 

三、绑定事件：

  <button onClick={this.addFn}>添加</button> 

这里需要注意的是onClick 是驼峰写法，为了区分和JS事件不一样，然后需要绑定方法的this 指向，在constructor 中如下：

constructor(prop){

this.addFn=this.addFn.bind(this);

}

addFn(){
console.log("1111")
}

 

 

四、react 路由 （这里以网页端为例，使用 react-router-dom）

安装：

npm install react-router-dom --save-dev //这里可以使用cnpm代替npm命令  

在App.js中引入

引入使用的时候需要用到的页面

 

全部为：

路由需要用到引入进来的HashRouter包裹。

 

五、路由间传值

路由有时需要用到路由间的传值，这个用法跟vue-router基本一致。

1、使用params，这里我们传个对象为例：

let data = {id:3,name:'史蒂芬库里',age:23};
data = JSON.stringify(data);
var opath = `/about/${data}`;

 

点击跳转的link:

  <li><Link to={opath}>About</Link></li> 

 

定义的路由 ：

<Route path="/about/:name" component={About} />

 

这里的component是刚才头部引入的页面

 

在about页面这样接收

 

   JSON.parse(this.props.match.params.name)

 

通过params传值这页面刷新的时候，数据不会丢失，不过只能传字符串

 

2、通过query

let data = {id:3,name:'史蒂芬库里',age:23};

var queryData= {
pathname: '/about',
query: data
}

   <li><Link to={query }>About</Link></li> 

<Route path="/about/" component={About} />  //注意这里的path跟上面不一样，没有参数 ：name

 

 接收：this.props.location.queryData

 

通过query 可以传对象，不过刷新页面，数据会丢失

 

3、JS路由跳转

路由跳转，更多时候我们都是用js控制，如下：（不能在入口文件app.js中这样写，只能在组件中这样写）

this.props.history.push("/news");

 

六、组件间的传值

父组件传子组件：

<TodolistItem    content={item} />

 

子组件获取：

this.props.content

 

子组件传父组件：

通过传递事件，跟vue的$emit类似

 在 vue组件中：

<h1 className={'haha'} onClick={()=>this.props.handleSelect('hhhhhh')}> 3333333333</h1>

 

中父组件app.js中：

 <News handleSelect={this.upFn}/>

 

然后添加 upFn 这个方法：

upFn(model){
console.log(model)   //hhhhhh
}

这样在父组件中就取到子组件传来的值了

 

                                                                  ps：第一次写记录类文章比较粗糙，哪里有错，欢迎指出