react低版本（2版本）项目练习总结

react低版本项目练习

       先创建一个项目文件，create-react-app pro
       如果电脑上已经安装了高版本的react，先将高版本的删掉，npm uninstall react react-dom --save-dev；如果当初安装的时候用的是-D，卸载的时候也使用-D，以免依赖卸载不完全。
       安装低版本的react，react-dom，react-router，axios；因为项目中要用到axios请求，这里一并安装了。
npm i react@15 react-dom@15 react-router@2 axios --save-dev
       创建成功后打开App.js文件，删掉无用的内容，然后输入自己要输入的内容，这里写了一个h1标签；

       在src文件夹里创建两个文件夹，一个views，用来存放视图组件；一个api文件夹，用来存放将要写的API接口。如图：

       在views文件夹里创建Home.js文件，在react中，需要什么属性就需要引入什么属性，和vue不同，vue中可以直接使用，写一个简单的页面如图：

       同样的在创建一个About.js文件，和Home.js文件一样，如图：
       先准备这两个不同的视图组件，等会给到两个不同的url来进行视图组件之间的同步映射，路径的声明放在根组件里边来进行定义，然后使用link标签写导航路由标签，link从react-router里来，是react-router的一个模块对象，link导航标签内写导航文字，使用to属性来定义这个导航标签所对应的路径，这些模块视图准备好了，还需要一个视图容器，react路由2.0里边的容器的写法是this.props.children（类组件的写法），因为写的是纯组件，里边没有this，把this去掉，我们通过props对象来进行定义声明他的children为我的路由容器，需要把props放到纯组件里，如图：

       接下来需要定义路由规则，规则在最终react-dom render渲染根节点的时候来进行描述，渲染在indx.js的入口文件里，我们需要导入路由对象router、规则对象route、hashHistory哈希模式从react-router，react-dom渲染的不是一个根组件，因为根组件也得当成一个路由所对应的视图，放在某个路由规则里去展示，所以渲染的时候不能渲染一个根组件，而是渲染这个路由对象，声明当前路由是这个对象的模式，router上有个hashHistory属性，加载导入的hashHistory这个模块，代表当前整个路由对象所有规则执行使用哈希模式的一个路由，在这个路由对象里填的就是路由规则，路由规则是route，都是组件标签，每个route上都有两个属性，一个path属性，代表路由规则的路径（第一个为根路径），路径上加载另一个component组件（括号里边是组件名APP），当前这个根路径这个规则内嵌套两个规则（一个home，一个about，完全以标签形式），需要嵌套的话写成双标签形式，这里写成单标签，记得导入你需要的组件文件，具体代码看图，如图：

       可以先npm start运行一下，看一下效果。

       打开页面根路径，下面应该有一个视图，对于默认视图的展示，react中有多种形式。第一种叫做IndexRoute，先引进来，他是一个默认视图展示的组件标签，他提供的属性是component，它可以让你在某个路径下，在不改变路径的情况下，默认展示一个子组件视图，比如我在根路径下默认展示一个home的组件，但是我的路径不能变成/home，这时就用到了IndexRoute，添加一个叫component的属性，这个组件存在的目的就是可以在某个路径下默认展示一个子视图内容，咱们展示的是home，直接把Home组件放到component。保存一下，看效果图，如图：

       重定向怎么来做，分为两种方式，一种IndexRedirect，另一种Redirect。Redirect有两个属性，一个from属性，一个to属性，意思就是从哪来，到哪去，它可以用来过滤掉某些路由路径的跳转，效果自己尝试一下。IndexRedirect是专门用来做重定向的，默认路径下我们让他访问到某一个根路径下或者某个路由路径里边，做一个初始的指向，它只有一个to属性，访问到某个路径里边。效果自己尝试，注意三者区别。

       对于我们当前导航标签选中的一个激活样式，react提供了一个activeStyle属性，这个属性是可以加载一段json对象形式的一个css样式的，作为当前导航标签选中时所触发的一个样式，通过activeStyle，其实相当于我们行内样式的写法，如果你需要给你的导航标签写一个选择激活样式的话，通过activeStyle来进行规定。代码如图：


       提到路由，必不可少的就是传参，在当前低版的react种有两种传参形式，我们将home文件作为一个数据列表请求的展示组件，咱们来请求一下后端接口，展示一下数据，要请求了，习惯性的去把这个请求去独立封装一下，代码如下：


       我们在home里的componentDidMount这个生命周期函数里来进行一个数据的获取，我们要用到api里的方法，把api这个模块对象接过来，
接着写请求：

查看数据是否请求成功，请求成功继续，失败改bug，请求成功需要一个状态值，状态值的声明放在构造器里，这里写简写形式，

将我们的data.data值赋给它：

在render中做一个遍历展示：

       页面列表已经展示，我们需要点击每一个是都可以进入详情页，把它改为一个Link标签，记得先接过来，代码如下：


路径有了，需要写组件，先写上简单的模版，配置路由，使其能够正常跳转。



       现在应该可以正常跳转，现在实现传参，这里以params传参为例，params传参相当于在路径里加/和id值，如图：

改动路由规则：

       路由规则配置好后，在detail进行接收，还是在component这个声明周期里接，路由的参数在它的props对象上存在，其他和home请求一样，代码如下：




       对于编程式路由的写法，通过我们导入的hashHistory对象提供了一个叫做push的方法，来进行切换，代码如下：


       还有query传参形式的方法，可以自己去尝试。