React相关

目录

React
Redux + React-Redux
React-Router
Axios
LESS
webpack

React

• 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(){
    }

}

几个关键概念

1. this.findDOMNode
   获取真实DOM元素。也可用原生方法获取。

2. this.props
   一般是组件与组件间传递参数。可以是上个组件的state，也可是给该组件设定的属性。

3. this.context
   实现跨级组件间传递参数。context相当于全局变量。避免组件污染，一般不用。

4. this.refs
   render返回的元素的属性，可以利用它获取DOM元素

5. key
   组件的唯一健值。当更改组件位置时，React根据此值做到只更新组件位置而不重新渲染。

6. this.props.history.push

7. 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等。

8. 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