目录
React
Redux + React-Redux
React-Router
Axios
LESS
webpack
React
React的执行原理主要是生命周期函数的自执行与state的触发执行。
将React组件渲染到html标签中。其中ReactDOM来自react-dom。
<div id='root'>div>
<script>
ReactDOM.render(
<ReactComponent/>,
document.getElementById('root')
);
script>
创建React组件。
export default class Test extends React.Component {
//1 第一个周期函数 完成组件的实例化,并初始化state或prop
constructor(props){
super(props);
this.state = {
//default state
},
this.param = {
//params等
}
},
//2 在此函数内异步请求后端获取数据。首次可修改state
componentWillMount(){
...
},
//3 虚拟DOM
render(){
return(
...
)
},
//4 真实DOM完成渲染后执行。可访问首次渲染的真实DOM的周期函数
componentDidMount(){
...
},
//5 父组件的state发生变化导致子组件的props变化后触发
componentWillReceiveProps(){
...
},
//6 判断props或state是否变化,返回true/false
shouldComponentUpdate(nextProps, nextState){
...
},
//7 执行完下面的周期函数会立即触发render
componentWillUpdate(){
},
//8 可访问更新后的真实DOM的周期函数
componentDidUpdate(){
},
//9 组件移除即刷新或离开页面时触发。一般用来中断请求
componentWillUnmount(){
}
}
几个关键概念
this.findDOMNode
获取真实DOM元素。也可用原生方法获取。
this.props
一般是组件与组件间传递参数。可以是上个组件的state,也可是给该组件设定的属性。
this.context
实现跨级组件间传递参数。context相当于全局变量。避免组件污染,一般不用。
this.refs
render返回的元素的属性,可以利用它获取DOM元素
key
组件的唯一健值。当更改组件位置时,React根据此值做到只更新组件位置而不重新渲染。
this.props.history.push
React.render与ReactDOM.render
react包含react-dom。故React.render与ReactDOM.render含义一样,都是将react组件渲染到html元素上。但现在常用ReactDOM.render。
react包括:React.createElement, .createClass, .Component, .proptypes, .children等;
react-dom包括:ReactDOM.render, .findDOMNode, .UnmountComponentAtNode等。
React.Component与React.createClass
都是用来创建组件的。
React.Component是ES6中的方法。需手动绑定this。推荐使用。
React.createClass是ES5方法。会自动绑定this。会逐渐被上面的方法替代。
Redux + React-Redux
Redux是对状态state管理的框架,通过createStore创建store来存放各个view对应的state,当Action发生时,Reducer计算得到新的state,比较state的变化,从来使view重新渲染。
React-Redux是在react中用的redux。
React-Router
路由,处理各组件跳转。映射一个地址,不同组件对应不同url。跳转不同url,在html的DOM元素中就渲染不同的组件。
Axios
可在浏览器和nodejs中使用的http请求库。
基于Promise;
Promise对象是ES6中处理异步操作的解决方案。可封装XMLHttpRequest进行http请求。
LESS
可嵌套书写css样式。在react中使用避免了css样式类重名。
webpack
模块打包工具。会将多个模块打包成一个或多个moudle。
react-hot-loader
react-hot-loader与webpack-dev-server同样都是热部署,不同处:
1、模块&&插件
2、能保存住state值使得只刷新页面的修改部分&&不能保存住state值导致每次修改都刷新整个页面
与React相关知识点书签:
webpack.config.js配置:https://doc.webpack-china.org/configuration/
webpack中plugins配置:https://doc.webpack-china.org/plugins/copy-webpack-plugin/
ECMAScript 6 入门:http://es6.ruanyifeng.com/?search=%3E&x=0&y=0#docs/spec
React官网:https://doc.react-china.org/
Redux + React Redux:http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html
React Router 使用教程:http://www.ruanyifeng.com/blog/2016/05/react_router.html
React 技术栈系列教程:http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html
react+redux项目实例:https://github.com/bailicangdu/react-pxq
react-router中的history:https://zhuanlan.zhihu.com/p/20799258?refer=jscss
React中的Context:http://blog.csdn.net/liwusen/article/details/53408906
JS的内建函数reduce:https://www.cnblogs.com/accordion/p/5230287.html
javascript之Object.assign()痛点:http://blog.csdn.net/waiterwaiter/article/details/50267787