react相关知识

< br />换行符

==React Router 4.0 ==
react-router-dom 基于浏览器的插件，封装了react-router，所以不要用react-router插件
4.0版本不需要路由配置，都是组件化
（在文档里可以发现 路由是直接写在渲染的< div>下面的）

< NavLink> 主要使用在菜单导航里 ，是< Link>的一个特定版本，会在匹配上当前的url的时候给已经渲染的元素添加参数，组件的属性有
activeClassName(string)：设置选中样式，默认值为active
activeStyle(object)：当元素被选中时，为此元素添加样式
exact(bool)：为true时，只有当导致和完全匹配class和style才会应用
strict(bool)：为true时，在确定为位置是否与当前URL匹配时，将考虑位置pathname后的斜线
isActive(func)判断链接是否激活的额外逻辑的功能

HashRouter:带# ，根路由用#进行嵌套 #/…/…
BrowserRouter:不带#

4.0增加了render()方法
<Route path="/admin" render={()=>
	<Admin>
		<Route path='/admin/home' component={Home} />

<Link to =({ pathname:'/three/7'})>Three #7 </Link>
link 里的to也可以指向对象
一个基本location对象
{ pathname:'/', search:'',hash:'',key:'abc123',state:{}}

<Route path="/three/:number"/>
取number值：this.props.match.params.number

Router里的switch
<Switch>
	<Route path='url' component={..} />
	<Route path='url' component={..} />
	<Route path='url' component={..} />
</Switch>
如果去掉switch匹配成功后会继续向下匹配
有switch只会匹配那个相同的第一个

4.0 <Route>标签可以写在任何一个地方 外面也可以包其他标签

Redirect重定向
（路径重定向）
<Redirect to="/admin/home" />

未匹配时
<Switch>
	<Route path="/" exact component={Home} />
	<Route component={NoMatch} />//如果未匹配成功就跳转这个路由
</Switch>

Demo1
pages/route-demo/

• route1
  • about.js
  • Home.js
  • main.js
  • topic.js

Home.js
import .....
render(){
	return(
	<HashRouter>
		<div>
			<ul>
				<li>
					<Link to="/"> Home </Link>
				</li>
				<li>
					<Link to="/about"> about</Link>
				</li>
				<li>
					<Link to="/topics"> topics</Link>
				</li>
			</ul>
			<hr/>
			//4版允许多个路由同时加载 想不拆分 需要加exact属性精准匹配
			//switch也可以 匹配到第一个就不往后走了
			<Route exact={true} path="/" component={Main}></Route>//注意component小写
			<Route path="/about" component={About}></Route>
			//如果是/about/topic 则/about那一个路由也需要加精准匹配
			<Route path="/topics" component={Topic}></Route>
		</div>
	</HashRouter>
	)
}

src/index.js
....
ReactDOM.render(<Home />,.....);

==Demo2==
如果要把路由这块单独抽取出来到route.js，把home.js里相关路由的东西删掉
点击Home.js里的link在router.js里匹配路由

Home.js
import .....
render(){
	return(
	
		<div>
			<ul>
				<li>
					<Link to="/"> Home </Link>
				</li>
				<li>
					<Link to="/about"> about</Link>
				</li>
				<li>
					<Link to="/topics"> topics</Link>
				</li>
			</ul>
			<hr/>
			{this.props.children}//把路由匹配的组件展现在这个地方
		</div>
	
	)
}


router.js
import React from 'react'
import ...
import {HashRouter as Router,Route,LinK }from 'react-router-dom'//as 起了几个别名
import Home from './Home'
export default class IRouter extends React.Component{
	render(){
		return(
			<Router>
				<Home>
				<Route path="/about" component={About}></Route>
			//如果是/about/topic 则/about那一个路由也需要加精准匹配
			<Route path="/topics" component={Topic}></Route>
				</Home>
			</Router>
		)
	}
}

src/index.js
....
ReactDOM.render(<router />,.....);

还可以进行路由嵌套
main.js
...
return(
	<div>
		<Link to="/main/a">嵌套路由</Link>
		</hr>
		{this.props.children}
	</div>
	);

router.js
...
			<Router>
				<Home>
				<Route exact={true} path="/" render={()=>
				<Main>
					<Route path="/a" component ={About}></Route>
				</Main>
				}></Route>//注意不要加大括号在箭头函数那里 会只执行大括号里面的代码而不返回了
			<Route path="/topics" component={Topic}></Route>
				</Home>
			</Router>

==获取动态路由id==
/:value

{this.props.match.params.value}

== github 使用教程 ==
https://www.cnblogs.com/zlxbky/p/7727895.html

react请求函数
https://blog.csdn.net/daxiazouyizou/article/details/79773307
fetch / axios

命令式开发
DOM 节点挂载等

声明式开发：
react
可以与其它框架并存

react要求单向数据流
父能传给子值 但子不可改变父值
那么如何用父组件的值呢？
子组件调用传递父值的方法

视图层框架

函数式编程

DIFF算法 different算法
两个虚拟DOM比对的方式
比较差异

调用setstate数据发生变化，setstate是异步的，
同层比对，
把已被修改的节点下所有的DOM节点删除，对整个原始DOM进行替换
key值比对：不要用index做KEY值

React 介绍
facebook开源的javascript库

MVC 模型(model)－视图(view)－控制器(controller)
Model，View，ViewModel，ViewModel负责视图逻辑

MV框架 :MV模式主要解决的问题就是 View代码难以维护的问题。
MV模式将View中的逻辑分离出去，形成一个弱逻辑的易于维护的视图。
MV中的*是Model和View的桥梁，负责保持Model和View的同步。

特点：
声明式编码
组件化编码
高效 - DOM diff算法 最小化页面重绘
单向数据流

Babel解析ES6语法（由于许多浏览器不支持

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle

编程式实现：要知道where what how
声明式实现：知道where what 不需要知道how

Yarn
优势：速度快
安装版本统一安全
更简洁的输出
更好的语义化

React生命周期
getDefaultProps 初始化一个props
getInitialState 初始化当前组件状态
componentWillMount组件加载之前调用的方法
render
componentDidMount组件DOM插入完之后调用的方法
componentWillReceiveProps父组件属性传递时调用的方法
shouldComponentUpdate调用更新
componentWillUpdate组件更新之前
componentDidUpdate更新之后
componentWillUnmount组件销毁之前

<div style={{}}> //这个两个大括号 里面的大括号是一个对象
同理：
var style ={backgroundColor:'red'}
return (<div style={style}>) 即可显示红色背景