7.25日学习记录

Posted 2020-09-29

1.html+css+js (基本) js(没掌握好)
2.简单的框架：bootstarp jq 插件 （百度） 一些效果插件（跟着文档教程很容易上手的） 比如移动端有一个(swiper) 轮播插件
3.原来的MVC架构( 把我们前端分为3层 M 是数据层 V 视图层 C 控制层 中间层 )
4. 前后端分离之后， 前端在不会有任何后端代码的参与(MVVM VUE react augular avloan )
5.开发的思想 模块化，工程化，（前端应该页面复杂后，多人协作开发会很困难，所以就出来了模块化, 就是说每一个人负责一个模块，sea.js require.js 比如这些工具都是基于几个标准进行开发，(AMD common,js)
）

6.工程化，我们的工程化理解就是说把我们开发应用当成一个工程去做，那么一个工程（把每一部分的应用单独抽离出来，但是最后又是需要我们进行整合的） (webpack，grunt,glup)
7.优化(如何去减少用户的带宽量，减小我们页面的开发体积，以及我们需要加载业务的大小)(最重要的，也是最难的) (css+js+img+http+cdn+dns)
8.如何提高我们代码质量的一些工具(开发的思想，函数式编程，一些优化算法，一些架构)
9.总结来说（前端都是在基于我们的页面开发 围绕的就是我们页面以及用户体验（流畅度）)
10。为了去解决问题

 

7.25 22-23:30: 跟着一起看下react 一起的技术栈是什么样子的； （react-router,redux,react-redux）

一：读react-router文档的记录以及理解:

1.基本用法：    

<Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>

2.如何配置路由：、
组件式的配置：

const routes = (

<Route>

<Route path="/" component={App}>

<Route path="/houseCheck" getComponent={houseCheck1} />

<Route path="/houseManage" getComponent={houseManage1} />

<Route path="/houseDetail/:houseId" getComponent={houseDetail1} />

<Route path="/roomDetail/:houseId/:roomId" getComponent={roomDetail1} />

<Route path="/popCheck" getComponent={popCheck1} />

<Route path="/map" getComponent={map} />

<Route path="/test" getComponent={test} query={{‘name‘: ‘dupi‘}} />

</Route>

<Route path="/login" getComponent={Login1}></Route>

</Route>

);

 

字面量的配置：

const routeConfig = [
  { path: ‘/‘,
    component: App,
    indexRoute: { component: Dashboard },
    childRoutes: [
      { path: ‘about‘, component: About },
      { path: ‘inbox‘,
        component: Inbox,
        childRoutes: [
          { path: ‘/messages/:id‘, component: Message },
          { path: ‘messages/:id‘,
            onEnter: function (nextState, replaceState) {
              replaceState(null, ‘/messages/‘ + nextState.params.id)
            }
          }
        ]
      }
    ]
  }
]

 

配置完成如何利用路由进行跳转：

React.render(<Router routes={routeConfig} />, document.body)


默认会有一个路由匹配机制：
 history：具体看文档