react学习之路
最近刚学习了react，发现与vue有许多不一样的地方，记录下一些自己的学习心得，
希望对刚刚入门react的小白有一些帮助。
1搭建项目
先开始在桌面上建立一个文件夹，名字随意，我用react命名。
开始安装依赖，执行
**
npm install -g create-react-app
create-react-app demos
cd demos
npm run start
**
这时候你已经有了一个react的项目了，但是却还没有完善起来。 你可能需要会需要修改一下项目本身的一些配置。
**
npm run reject //反编译代码，将webpack配置暴露出来
/*
新一点的版本会执行不了，他会提示你需要建立一个git版本才能执行.
好了，我们开始建立git版本
git init
git add .
git commit -m 'init'
npm run reject
*/
**
这时候你会得到config文件夹和script文件夹。我本人需要的功能配置比较少，如果这里没有的配置可以自行百度解决。
**
//webpack.config.js
webpack基础配置都在这里。
module: {
rules: {
//add code
//配置less
{
test: /\.(less)$/,
exclude: /\.module\.(less)$/,
use: getStyleLoaders({ importLoaders: 3 }, 'less-loader'),
},
}
}
//添加路劲别名
resolve: {
alias: {
//add code
'@': path.resolve('src'),
}
}
**
这时候已经有两个东西了， 你可以使用less去写你的css,当然你也可以配置你喜欢的插件，新的语法什么的去构建，还有得到一个简便化的路劲‘@’对象。接着我们来对自己的项目进行规划，你的每个资源应该放在那里。 我一般项目目录都是如下：
**
-demos
--config
--public
--react
--script
--src
//静态资源
--assets
--images
//组件资源
--conponents
--Swiper
Swiper.js
Swiper.less
//页面
--pages
--Home
Home.js
Home.less
//状态管理
--redux
//路由管理
--router
index.js
//请求服务管理
--server
index.js
//工具
--utils
APP.JS
APP.less
index.js
index.less
packge.json
**
2.开始编写页面
第一我们先将入口文件写好
**
//App.js
import React, { Component } from 'react';
import './App.less';
import RouteConfig from '@/router/index';
class App extends Component {
render() {
return (
<div className="bodyContainer">
<RouteConfig />
</div>
);
}
}
export default App;
**
第二 我们需要开始写路由RouteConfig
**
//下载依赖
npm install --save react-router-dom
// /router/index.js
import React, { Component } from 'react';
import { HashRouter, Switch, Route } from 'react-router-dom';
//引入页面
import Home from '@/pages/Home/index';
import User from '@/pages/User/user';
import Exhibition from '@/pages/Exhibition/exhibition';
export default class RouteConfig extends Component {
render() {
return (
//使用hash模式
<HashRouter>
//保证匹配一个
<Switch>
//exact 验证完全匹配
<Route exact path="/" component={Home} />
<Route path="/user" component={User} />
//带参数路径
<Route path="/exhibition/:id" component={Exhibition} />
</Switch>
</HashRouter>
)
}
}
**
这个路由组件是我临时写的，你可以更加的细化它，给他建立路由表，然后通过路由对象去渲染路由组件。
路由需要注意的点是：
- 当你path为 ‘/’ 和 ‘/user’的时候，你跳转‘/user’的时候它不会渲染User组件，为什么呢？
因为当路由匹配到 ‘/’的时候路由对象会输出第一个匹配的对象，所有你需要在路由对象上加上 exact 属性。 完全匹配。
2.当你带参数过去的时候，有很多种方法，可惜都会在页面刷新的时候会重置，这样你页面就会报错
带参数过去的方法有以下几种：
**
'query'方式：
<Route path="/exhibition" component={Exhibition} />
<Link to={{ pathname="exhibition", query={id: 0} }} />
页面刷新会消失，因为存在react对象下，页面重新render的时候会重置对象。
'state'方式：
<Route path="/exhibition" component={Exhibition} />
<Link to={{ pathname="exhibition", state={id: 0} }} />
页面刷新会消失，因为存在react对象下，页面重新render的时候会重置对象。
'/:id'方式
<Route path="/exhibition/:id" component={Exhibition} />
<Link to={"/exhibition" + 0} />
页面刷新不会消失，因为地址上会显示值，react对象会通过地址获取到值
**
有了路由对象，这样我们就可以切换页面，可以进行页面的编写了。
**
//Home.js
//引入react对象
import React, {Component} from 'react';
//react对象类型判断
import PropTypes from 'prop-types';
//路由对象跳转组件
import { NavLink } from 'react-router-dom';
//创建一个home类 继承Compoent对象
class Home extends Component {
//子类的方法
constructor(props) {
//继承this 和props
super(props);
this.state = {
id: 0,
}
}
//对象私立方法 以_开头
_changeName() {
console.log(this.props.name)
}
//输出函数
render() {
//在这里可以在输出前拿到home对象底下的 state, 方法，props;
var { id } = this.state;
var { name } = this.props;
var _changeName = this._changeName;
//输出你要展示的内容
return (
<div>
123
</div>
)
}
}
**
react的文档可以访问 react.docschina.org
如果你学习过mvvm框架，理解起来就不难，vue会将模板，数据，样式分成3个部分，react只有2个部分 类和样式。
1.新建一个类
class Home extends Component {}
这里会继承Component对象的方法和属性。
2.创建私有属性和方法
constructor(props) { //继承this 和props super(props); this.state = { id: 0, } }
_changeName() { console.log(this.props.name) }
私有属性放在constructor 里面，私有方法放在home类里面.state可以相当于vue的vue数据对象。
3.输出模板
render() {
return (
<div>hello {this.state.name} {{{ <div>123</div> }}} </div>
)
}
render是一个输出函数，放入已经拼接好数据的模板。所有内容放入一个父容器里面， 默认里面为字符串输出， 如果要放变量或者表达式 用 {} 包裹。如果要解析html代码用 {{{ }}}包裹。
**
**
当你已经会写react对象时，你就需要了解react的生命周期
初始化Props,PropTypes, 实例化类 -> 组件挂载之前（componentWillMount()）=> 开始挂载 => 组件挂载之后（componentDidMount） => 组件运行=> 组件更新或者props更新 => 组件是否需要更新=> 组件更新之前（compentWillUpdate）=> 组件刷新 => 组件刷新之后(componentDidUpdate) => 组件运行 => 组件卸载(componentWillUmount)（）
需要注意的是当你props改变 或者state改变的时候都会触发组件刷新。
3. react知识点
1.组件更新状态是异步的，所以有时候会造成你数据更新了但是视图并不会更新
**
//触发状态更新 但是是异步操作 视图不会更新
a() {
this.setState({
name: 2
})
}
this.setState({
name: 1
})
a();
得到的name = 1
//setState第二个参数是回调 会在状态更新后执行
a() {
this.setState({
name: 2
})
}
this.setState({
name: 1
}, () => this.a )
得到的name = 2
**
2输出html数据
**
// 此属性是react 防止跨站点脚本（XSS）攻击
// dangerouslySetInnerHTML 设置html 并使用__html键传递对象
<div dangerouslySetInnerHTML= {{ __html: this.state.content }}></div>
**
4.请求数据
请求数据我用的事axios， 喜欢用fetch的其实都差不多
**
import axios from 'axios'
import config from './config'
import qs from 'qs'
const service = axios.create(config)
// POST 传参序列化
service.interceptors.request.use(
config => {
if (config.method === 'post') {
config.data = qs.stringify(config.params)
config.headers={
'Content-Type': 'application/x-www-form-urlencoded'
}
}
//console.log(config)
return config
},
error => {
return Promise.reject(error)
}
)
// 返回状态判断
service.interceptors.response.use(
res => {
//console.log('ceres', res)
return res.data
},
error => {
return Promise.reject(error)
}
)
export default {
post (url, data) {
//console.log('post request url', url)
return service({
method: 'post',
url,
params: data
})
},
get (url, data) {
// console.log('get request url', url)
return service({
method: 'get',
url: url,
params: data
})
}
}
**
路由，页面，数据都可以的时候，这时候页面最基础的元素就都有了。你就可以开始写你自己的项目。今天暂时就写这么些，以后再慢慢更新，如果有什么没有写上去的可以在下方评论告诉我。
