react课程总结

react是什么：react是一个构建UI 的库，是facebook 出品，专注于view 层;一切皆为组件，全部使用es6新语法；react16 是第一个核心代码重写的版本，整体API变化不大，主要变更了错误处理和生命周期，打包，对开发影响不大

react 的view 语法：

1) Js 里直接写html

2) Class 要写成 className

3)变量使用{}包裹即可

props 可变的，是组件之间进行信息传递的。通过this.props获取

state 组件自己内部的状态，设置 this.state= {name :”A”}, 修改 this.setState 是返回一个新的state 状态,而不是修改

事件处理： this 的获取

1) 在construct 函数内部使用bind 绑定this，指向 class
this.事件名 = this.事件名.bind(this);

onClick

1 2	2) 使用箭头函数 ``` <button onClick ={()=>this.事件名()}

3)将触发函数写成箭头函数形式

react 生命周期

1）初始化时期：执行 constructor() ，componentWillMout() //准备加载组件,render() //渲染产生dom ,ComponentDidMount() //组件加载完毕

2）组件重新渲染生命周期:componentWillReceiveProps() // 组件准备接受父组件的props, this.setState()改变执行 shouldComponentUpdate();//是否更新组件返回 true 表示更新； componentWillUpdate() 组件将要更新； render（），componmentDidUpdate() //组件更新完毕

3）组件卸载生命周期

react 原理

虚拟dom

我们所写的 jsx 都会利用 babel 转化为js ，这样就使用crerateElement将所有的写入内存里面

UI库的使用npm install antd-mobile@next –save

网址 ant-mobile

按需加载 1）npm install babel-plugin-import –save

2）将打开package.json ,将原来babel 修改为下面这样

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins":[
      ["import", { "libraryName": "antd-mobile", "style": "css" }]
    ]
  },

3）就不需要引入 css 文件，会实现按需加载

Redux是什么?

是一个状态管理的库，和react 解耦，单一状态，单项数据流；核心概念 store(所有状态） ,state（状态记录）,dispatch(需要什么）， action（要干什么）； reducer(处理变化，拿到state 和action 生成新的state ）

Redux 使用：

1）先是通过 reducer 新建 store ,随时通过 store.getState 获取状态

2）需要状态变更，store.dispatch(action)来修改状态

3）Reducer函数接受state 和action ，返回新的state ,可以用store.subscribe 监听每次修改

Redux

1）redux（默认处理同步）处理异步，需要插件：npm install redux-thunk –save 插件，使用applyMiddlelware 开启thunk 中间件（在index.js中开启 p 4-4）

2）调试工具 npm install redux-devtools-extension 并且开启

3）使用react- redux 链接 react 和 redux;

npm install react-redux –save

忘记subscribe 记住reducer ,action,和dispatch,提供两个接口 Provider 和 connect ；

Provider 组件在应用的最外层，传入store即可，只用一次

Connect 负责从外部可获取组件需要的参数（Connect 可以使用装饰器的方式写）
装饰器优化connect 代码：npm run eject; npm install babel-plugin-transform-decorators-legacy –save-dev;

再将 package,json中 babel 添加 “plugins”:[“transform-decorators-legacy”]

将：

mapStatetoProps

	return {num:state}
}
const actionCreators ={add,reduce,addAsync} 
App = connect(mapStatetoProps,actionCreators)(App)
改写：
@connect(
	state=>({num:state}),
	{add,reduce,addAsync}
)

connect 参数（将什么属性防止在props,想什么方法放入props）自动包含dispatch

React-Router4 路由

1)安装 npm install react-router-dom –save

2)BrowserRouter 包裹整个应用里面只是包含一个Route 所以多个需要使用div 进行包裹

2）Router 路由对应渲染的组件，可嵌套

3）Link 跳转

4）路由不是完全匹配，是通过正则进行匹配，需要完全匹配需要添加 exact

5)switch 只是渲染第一个配的路由的组件

import React from 'react'
import ReactDom from 'react-dom'
import  { createStore,applyMiddleware,compose} from 'redux'
import thunk from 'redux-thunk'
import {Provider} from 'react-redux'
import {BrowserRouter,Route,Link} from 'react-router-dom'
import App from './App'
import {counter} from './index.redux'
const store = createStore(counter,compose(
	applyMiddleware(thunk),
	window.devToolsExtension?window.devToolsExtension():f=>f
	) )
function A(){
	return <h1>A</h1>
}
function B(){
	return <h1>B</h1>
}
	ReactDom.render(
		(<Provider store={store}>
			<BrowserRouter>
			<div>
				<ul>
					<li>
						<Link to="/">One</Link>
					</li>
					<li>
						<Link to="/A">A</Link>
					</li>
					<li>
						<Link to="/b">B</Link>
					</li>
				</ul>
				<Route path="/" exact component={App}></Route>
				<Route path="/A" component={A}></Route>
				<Route path="/B" component={B}></Route>
			</div>
		
			</BrowserRouter>
		</Provider>),
		document.getElementById("root")
		)

多个页面进行多个信息的管理：

使用下面代码对redux 信息进行集中管理，只需要给每一个需要的组件传入自己需要的组件就可以。

//合并所有的reducer ，并且返回
import {combineReducers} from 'redux'
import { counter } from './index.redux'
import { auth } from './Auth.redux'
export  default combineReducers({counter,auth})

md5 加密 npm install utility

加密： const utils = require(‘utility’)
function md5Pwd(pwd){
const salt = ‘zhjschdshgo04r&&^((^%$###%&&‘;//加盐，使得更安全
return utils.md5(utils.md5(pwd+salt))//双层加密更安全

清除登录信息

install browser-cookies --save

1 2	import browserCookie from 'browser-cookies' browserCookie.erase('userid')

高阶组件

属性代理

function WrapperHello(Comp){
	
	class WrapComp extends Reacr.Component{
		render(){
		return(
			<div>高阶组件</div>
			<Comp {...this.props}></Comp>
			)
		}
	}
	return WrapComp
}
@WrapperHello //=> Hello = WrapperHello(Hello)
class Hello extends React.Component{
	render(){
	return <div> HEllO </div>
}
}
2. 属性继承

function WrapperHello(Comp){
class WrapperHello extends Hello{

render(){
return ( <Comp></Comp>)
}
}

return WrapComp
}

@WrapperHello //=> Hello = WrapperHello(Hello)
class Hello extends React.Component{
render(){
return

HEllO

}
}


####  Socket.Io
##### 是什么？
 1) 是基于websocket协议（双向通信）
 2) 前后端是通过事件进行双向通信
 
##### socket.io 和 Ajax区别：
1. Ajax 是基于http协议，单向的，实时获取信息数据只能采用轮询机制
2. 是基于websocket协议（双向通信）前后端是通过事件进行双向通信
##### 后端API /前端
1. Io = require('socket.io')(http)
 import  io from 'socket.io-client'
2. io.on 监听事件
3. io.emit 触发事件
4. 发送全局数据：
 io.emit('recvmsg',data)
### eslint 代码校验工具
### react16 特有的错误处理机制
### react 性能优化
## 遇到的问题
1. 点击click 没有反应 ：解决：	<Item style={{zIndex:1}} onClick={this.logout}>退出登录</Item>
2.

这里使用function导致找不到 this ，所以使用箭头函数
socket.on(‘recvmsg’,function(data){
console.log(data)
this.setState({
msg:[…this.state.msg,data.text]
})
})
socket.on(‘recvmsg’,(data)=>{
console.log(data)
this.setState({
msg:[…this.state.msg,data.text]
})
})

```

Object.values({name:’iii’,age:12}) //结果为 [‘iii’,18]
将v.read 改为 true

{…v,read:true}

Jq 性能优化：
$(‘#text’)。find（’img’)
$(‘#text img)
第一个性能更好，原因是jq 的$符号是从右向左查找的逻辑机制

服务器端渲染

/home/lyrics/Git/react-Project/reactApp/node_modules/normalize.css/normalize.css:12
html {
^

SyntaxError: Unexpected token {
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:152:10)
at Module._compile (module.js:605:28)
at Module._extensions..js (module.js:652:10)
at Object.require.extensions.(anonymous function) [as .js] (/home/lyrics/Git/react-Project/reactApp/node_modules/babel-register/lib/node.js:152:7)
at Module.load (module.js:560:32)
at tryModuleLoad (module.js:503:12)
at Function.Module._load (module.js:495:3)
at Module.require (module.js:585:17)
at require (internal/module.js:11:18)

解决： npm install css-modules-require-hook –save
import csshook from ‘css-modules-require-hook/preset’ 在app之前

// cmrh.conf.js 新建文件
module.exports = {
// Same scope name as in webpack build
generateScopedName: ‘[name][local]_[hash:base64:5]’,
}

图片问题

/home/lyrics/Git/react-Project/reactApp/node_modules/babel-core/lib/transformation/file/index.js:590
throw err;
^

SyntaxError: /home/lyrics/Git/react-Project/reactApp/src/component/logo/logo.png: Unexpected character ‘�’ (1:0)

1 | �PNG
| ^
2 |
3 |

解决：npm install asset-require-hook –save

react是什么：react是一个构建UI 的库，是facebook 出品，专注于view 层;一切皆为组件，全部使用es6新语法；react16 是第一个核心代码重写的 版本，整体API变化不大，主要变更了错误处理和生命周期，打包，对开发影响不大