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(
            <div>...</div>
        )
    },
    //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

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/csdn_girl/article/details/78785313
文章标签: jlkjkl
想对作者说点什么? 我来说一句

React 相关Demo

2017年06月21日 4.39MB 下载

没有更多推荐了,返回首页

不良信息举报

React相关

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭