React项目

React项目开发构建

安装

 npx create-react-app 项目名称 

进入项目根目录，执行启动项目命令:

npm start 

访问 http://localhost:3000/ 即可查看

styled-components的使用

在react中，正常的给组件引入css文件，该css文件会直接作用于全局，使用styled-components可以有效控制好css作用域
安装命令：

npm install --save styled-components

• 全局样式

配置并设置全局样式，新建一个js文件，style.js，使用createGlobalStyle创建全局样式

import {createGlobalStyle} from 'styled-components';
// 创建全局样式
export const Globalstyle=createGlobalStyle`
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
`

在主组件app.js中引入style.js文件，将Globalstyle当作组件放入render中

import React from 'react';
import {Globalstyle} from './style'
import Header from './common/header'

function App() {
  return (
    <>
      <Globalstyle />
      <Provider store={store}>
        <Header />
        {/* 配置路由 */}
      </Provider>
    </>
  );
}

export default App;

• 局部样式
  引入styled-components，设置一个div样式，最后导出

import styled from 'styled-components';
// 创建了组件 HeaderWrapper，此组件是一个div，模板字符串中是当前组件的样式
export  const HeaderWrapper=styled.div`
    position:relative;
    height: 56px;
    border-bottom:1px solid #f0f0f0;
    margin: 0 auto;
`

引入style的HeaderWrapper，其实就是一个带有样式的div了

import React, { Component } from 'react'
// 从 style.js 中导入需要用到的组件
import { HeaderWrapper} from './style.js'

class Header extends Component {
	render() {
		return (
			<HeaderWrapper>
				HeaderDIV
			</HeaderWrapper>
		)
	}
}

export default Header

在react中使用redux

• redux是一个独立专门用于做状态管理的JS库
• 作用：集中式管理react应用中的多个组件共享的状态
• redux工作流程：
  
  redux的核心API
• createStore()
  作用：创建包含指定的reducer的对象

import reducer from './reducer'
import * as actionCreatos from './actionCreators'
import * as actionType from './actionType'
export {
    reducer,
    actionCreatos,
    actionType
}

store对象
作用：redux最核心的管理对象
Store核心方法：

• getState()
  得到state
• dispatch(action)
  分发 action。这是触发 state 变化的惟一途径。
• subscribe(listener)
  变化监听器。每当 dispatch action 的时候就会执行，state 树中的一部分可能已经变化。你可以在回调函数里调用 getState() 来拿到当前 state。
• replaceReducer(nextReducer)
  替换 store 当前用来计算 state 的 reducer。

安装redux

npm install --save redux
npm install  react-redux

store/actionType.js
Action对象的type常量名称模块

出口常量SEARCH_FOCUS = 'search_focus' 
出口常量SEARCH_BLUR = 'search_blur' 
出口常量CHANGE_HOTLIST = 'change_hotlist' 
出口常量MOUSE_ENTER = 'MOUSE_ENTER' 
出口常量MOUSE_LEAVE = 'MOUSE_LEAVE' 
出口常量CHANGE_PAGE = 'change_page' 
出口常量CHANGE_ISLOADING =” change_isloading” 

store/actionCreators.js

import * as actionType from './actionType'
export const searchFocus = () => {
  return {
    type: actionType.SEARCH_FOCUS
  }
}

store/reducers.js
根据旧的state和指定action，处理并返回一个新的state

import * as actionType from './actionType'
import {fromJS} from 'immutable'
/*
将普通的js对象转换为immutable（不可改变的）对象
fromJS 对象，不仅会将直接参数对象转换为immutable对象
而且，会将此对象中的JS对象，转换为immutable对象（前提是某个属性的值也是一个js对象）
*/

const defaltValue=fromJS({
    focused:false,
    hotList:[], // 存储热门搜索
    mouseIn:false, // 标识鼠标是否在热门搜索盒子的区域内，如果为true，则在区域内，此时点击这个盒子，盒子不应该消失
    page:0, // 当前页码
    totalPage:1, // 总的热门搜索关键字的个数
    isLoading:false
})
export default (state=defaltValue,action)=>{ 
    
    if(action.type===actionType.SEARCH_FOCUS){           
        // set 方法会修改state中的 focused 属性的值为 true    
      return state.set('focused',true)    
    }
    if(action.type===actionType.SEARCH_BLUR){        
        return state.set('focused',false)       
    }
    if(action.type===actionType.CHANGE_HOTLIST){        
        // console.log(action.data)
        const totalPage=Math.ceil(action.data.size/10)
        return state.set('hotList',action.data).set('totalPage',totalPage)    
    }
    if(action.type===actionType.MOUSE_ENTER){        
        return state.set('mouseIn',true)       
    }
    if(action.type===actionType.MOUSE_LEAVE){        
        return state.set('mouseIn',false)       
    }
    if(action.type===actionType.CHANGE_PAGE){        
        return state.set('page',action.page)
    }
    if(action.type===actionType.CHANGE_ISLOADING){        
        return state.set('isLoading',action.value)
    }
    return state
}

applyMiddleware（）

应用上基于redux的中间件(插件库)

import {createStore,compose,applyMiddleware} from 'redux';
import thunk from 'redux-thunk'
import reducer from './reducer';
const composeEnhancers =
  typeof window === 'object' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;

const enhancer = composeEnhancers(
  applyMiddleware(thunk)
);
const store = createStore(reducer, enhancer);
export default store

react-redux

一个react插件库，用来简化react应用中使用redux

相关API

Provider

所以组件都可以得到state数据

<Provider store={store}>
      <App/>
    </Provider>

connect()

用于包装UI组件生成容器组件（将组件与react-redux连接起来）

import { connect } from 'react-redux'
// 将store中的state中的数据赋值给当前组件的props对象
const mapStateToProps = (state) => {
  return {}
}
// 将store 的 dispatch方法赋值给当前组件的props对象
const mapDispatchToProps = (dispatch) => {
  return {}
}
export default connect(mapStateToProps, mapDispatchToProps)(Header)