目录
1、script。
2、jsx语法
3、绑定事件
4、函数组件
5、解析html
6、遍历
7、判断
8、slot插值
9、jsx编译
10、创建组件---createClass
11、创建组件---component(es6)
12、组件通信
13、表单内容
14、性能优化
15、路由
16、路由传参
17、生命周期
18、key的作用
19、状态（state）和属性（props）之间有何不同
20、虚拟dom
21、为什么说虚拟dom会提高性能？
22、diff算法
23、dva：js和jsx的区别
24、dva：路由跳转
25、刷新拦截
正文
1、script。默认type='text/javascript'
- <script type='text/babel'>，页面在加载时会被browser.js编译成真正的js插入页面中。
2、jsx语法
- jsx是js和html混合的写法，遇到<>以html形式进行解析，遇到{}以js形式进行解析。
3、绑定事件
- 不传参：例：<div onClick={f1}></div>
- 传参：例：<div onClick={(e)=>{f2(100,e)}}></div>
4、函数组件（将模板return出去）
普通函数调用：例：{Ipt()}
组件形式调用：例：<Ipt a='10' b={20}></Ipt>。参数用props接收。定义时首字母大写。
5、解析html
dangerouslySetInnerHTML（==v-html）：例：
<div dangerouslySetInnerHTML={{__html:str_x}}></div>
6、遍历
7、判断
8、slot插值
- 通过props.children获得。
9、jsx编译
var x = <div id="box"> hello </div>
var x = React.createElement("div",{id:"box"},[React.createElement("em",{key:1},"hello"),React.createElement("span",{key:2},"span")])
10、创建组件---createClass
- createClass：React.createClass({})
- getInitialState：组件内部的状态，可相应的，是一个function返回对象。例：
getInitialState(){
return {
num:0
}
}
- render：定义模板。this指向组件实例。例：
render(){
return(
<div>
<button onClick={()=>{this.increase(100)}}></button>
</div>
)
}
- 方法。方法内部本身为null，改变this指向后，this指向组件实例。例：
increase(a){
this.setState({ // 修改状态；访问状态：this.state.val
num:this.state.num+a
},()=>{ // 数据变化，DOM更新之后执行函数，类似于Vue nextTick
console.log(this.refs.txt.innerHTML) // 操作DOM
})
}
因为setState是一个异步的过程，所以说执行完setState之后不能立刻更改state里面的值。如果需要对state数据更改监听，setState提供第二个参数，就是用来监听state里面数据的更改，当数据更改完成，调用回调函数。
11、创建组件---component(es6)
class App extends React.Component{}
- constructor：定义自身的方法和属性。例：
constructor(props){
super(props); // 继承
this.state={
num:100
}
}
12、组件通信 原文链接
- 父--->子：父组件通过向子组件传递props，子组件得到props后进行相应的处理。
- 子--->父：利用回调函数，可以实现子组件向父组件通信：父组件将一个函数作为props传递给子组件，子组件调用该回调函数，便可以向父组件通信。
- 兄弟：react-redux 原文链接 redux是react中常用的一个进行集中状态管理的工具，当一个状态被多个状态所访问时，传统组件通信过于繁琐，可以将状态放入redux。
13、表单内容
<input type="text" value={this.state.val} onChange={(e)=>{this.setState({val:e.target.value})}}/>
14、性能优化
- 组件内部调用setState，当前组件及子组件都会重新渲染，生命周期并不会重复执行。
- shouldComponentUpdate：决定组件是否重新渲染，return true 渲染。可以避免不必要的dom操作。
- PureComponent：class Index extends React.PureComponent{}
- 使用路由懒加载。
- 使用key来帮助React识别列表中所有子组件的最小变化。
15、路由
路由暴露对象是ReactRouterDom。例：
let { HashRouter, Route, Link, Redirect, Switch, withRouter} = ReactRouterDom
- Route包裹路由组件。例：<Route path='/' component={Index}/>
- Link类似于vue中 router-link。例：<Link to='/'> 首页 </Link>
- NavLink：是Link的一个特定版本，会在匹配上当前的url的时候，给已经渲染的元素添加 样式 参数。原文链接
- BrowserRouter（路径不带#）、HashRouter（路径带#）限定路由使用区域 原文链接。
- withRouter：对普通组件进行包裹，将路由相关对象注入到组件。只有路由组件上props内部包含路由相关信息及方法。需要使用withRouter将路由对象注入 非路由 组件的props上。
- Redirect：路由重定向。
- Switch：确保包含的Route组件只匹配一个。
16、路由传参 原文链接
- 方式一：params（刷新页面数据不会丢失）
路由配置：例：<Route path='/detail/:id' component={Detail}></Route>
路由跳转：例：this.props.history.push('/detail/10')；<Link to='/detail/10'></Link>
注意：js跳转时，需要使用withRouter。例：export default withRouter(connect(getProps,getDis)(List)) 父组件
路由页面接收参数：例：this.props.history.match.params.id
当前路由：例：localhost:3000/detail/10 - 方式二：state（刷新页面数据不会丢失）
路由配置：例：<Route path='detail' component={Detail}></Route>
路由跳转：例：this.props.history.push({pathname:'/detail',state:{id:10}})；<Link to={{pathname:'detail',state:{id:10}}}></Link>
注意：js跳转时，需要使用withRouter。例：export default withRouter(connect(getProps,getDis)(List)) 父组件
路由页面接收参数：例：this.props.location.state.id
当前路由：例：localhost:3000/detail - 方式三：query（刷新页面数据丢失）
路由配置：例：<Route path='detail' component={Detail}></Route>
路由跳转：例：this.props.history.push({pathname:'/detail',query:{id:10}})；<Link to={{pathname:'detail',query:{id:10}}}></Link>
注意：js跳转时，需要使用withRouter。例：export default withRouter(connect(getProps,getDis)(List)) 父组件
路由页面接收参数：例：this.props.location.query.id
当前路由：例：localhost:3000/detail
17、生命周期 原文链接
声明周期里的this指向组件实例。
- 1、getDefaultProps
这个方法是用来设置组件默认的props，组件生命周期只会调用一次。只适用于React.createClass直接创建组件。 - 2、getInitialState
设置state初始值，可以访问到this.props。只适用于React.createClass。 - 3、componentWillMount
这个方法在组件首次渲染之前调用，这个是在render方法调用之前可以修改state的最后一次机会。这个很少用到。 - 4、render
JSX通过这里，可以解析成对应的虚拟DOM，渲染成最终结果。 - 5、componentDidMount
这个方法在首次真实的DOM渲染后调用（仅此一次）。当我们需要访问真实的DOM时，在这个方法中访问。 - 6、componentWillReceiveProps
每当我们通过父组件更新子组件props时（这个也是唯一途径），这个方法被调用。 - 7、shouldComponentUpdate
字面意思，是否应该更新组件，默认返回 true。当返回 false 时，后期函数就不会调用，组件不会在次渲染。 - 8、componentWillUpdate
组件将会更新，props和state改变后必调用。 - 9、render
跟实例化的render一样。 - 10、componentDidUpdate
这个方法在更新真实的DOM成功后调用，当我们需要访问真实的DOM时，这个方法也经常用到。 - 11、componentWillUnmount
每当组件调用，这个组件就必须从DOM中销毁，此时该方法就会被调用。当我们在组件中使用了setInterval，那我们就需要在这个方法中调用clearInterval。如果手动使用了addEventListener绑定事件，也需要解绑事件。
18、key的作用
- Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。
19、状态（state）和属性（props）之间有何不同
- state：是一种数据结构，用于组件挂载时所需数据的默认值。state可能会随着时间的推移而发生突变，但多数时候，是作为用于事件行为的结果。
- props(properties)：是组件的配置。props由父组件传递给子组件，并且就子组件而言，props是不可变得。组件不能改变自身的props，但是可以把其子组件的props放在一起（统一管理）。props也不仅仅是数据，回调函数也可以通过props传递。
20、虚拟dom
- 本质：用js对象，来模拟DOM元素的嵌套关系；
- 目的：就是为了实现页面元素的高效更新。
21、为什么说虚拟dom会提高性能？
- 说Virtual(虚拟) DOM高效的一个理由就是它不会直接操作原生的DOM节点，因为这个很消耗性能。当组件状态变化时它会通过某些diff算法去计算出本次数据更新真实的视图变化，然后只改变“需要改变”的DOM节点。
- 虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。
22、diff算法
- tree diff：新旧两棵DOM树，逐层对比的过程，就是Tree Diff；当整棵DOM逐层对比完毕，则所有需要按需更新的元素，必然能够找到。
- component diff：在进行Tree Diff的时候，每一层中，组件级别的对比，叫做Component Diff。
如果对比前后，组件类型相同，则暂时认为组件不需要被更新。
如果对比前后，组件类型不同，则需要移除旧组件。创建新组建，并追加到页面上。 - element diff：在进行组件对比的时候，如果两个组件类型相同，则需要进行元素级别的对比，这叫做Element Diff。
23、dva：js和jsx的区别
- JS：即JavaScript，一种直译式脚本语言。
- JSX：即JavaScript XML——一种在React组建内部构建标签的类XML语法。(增强React程序组件的可读性)。
- 区别：浏览器只能识别普通的js，普通的css，并不能识别scss，或者jsx（scss是css的拓展，jsx可以看做是js的拓展），所以webpack的作用是把scss转换为css，把jsx转换为浏览器可以识别的js，然后浏览器才能正常使用。
JSX语法，像是在Javascript代码里直接写XML的语法，实质上这只是一个语法糖，每一个XML标签都会被JSX转换工具转换成纯Javascript代码，React 官方推荐使用JSX， 当然你想直接使用纯Javascript代码写也是可以的，只是使用JSX，组件的结构和组件之间的关系看上去更加清晰。
24、dva：路由跳转
- 1、'dva/router'下引入Link；
布局中使用<Link to='/'>去首页</Link> - 2、this.props.history.push('/') // 注：需要将父级页面的history传递过来。
- 3、组件文件引入：import {withRouter} from 'dva/router'
export default withRouter(ListBtn) - 4、组件文件引入：import {routerRedux} from 'dva/router'
this.props.dispatch(routerRedux.push('/'))
25、刷新拦截（参考文件）
componentWillMount () {
// 拦截判断是否离开当前页面
window.addEventListener('beforeunload', this.beforeunload);
}
componentWillUnmount () {
// 销毁拦截判断是否离开当前页面
window.removeEventListener('beforeunload', this.beforeunload);
}
beforeunload (e) {
let confirmationMessage = '你确定离开此页面吗?';
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage;
}
