React相关

原创 2018年02月01日 10:59:39

目录

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

React 基础题

提供一个react设计思路: 将所有的无状态(state)只负责渲染的组件作为子组件封装到父组件包含状态机(state)当中,子组件数据变化是通过父组件的state中变量转换为子组件的props来进...
  • frank_eos
  • frank_eos
  • 2016年09月27日 09:55
  • 307

React简单实用小知识点整理(一)

react
  • u013558749
  • u013558749
  • 2017年03月10日 19:01
  • 889

react native 0.52下安卓sdk配置

这是使用rn遇到的第二坑 sdk配置不好,项目gradle编译就会有各种问题 tools - Android SDK Build-tools 23.0.1 Android 6.0(API 23...
  • wm5920
  • wm5920
  • 2018年01月19日 12:46
  • 100

React 常见的面试题

根据记录,问这些问题可能不是深入了解他们在使用 React 方面的经验的最佳方式。http://www.tuicool.com/articles/fqaqqmF 之所以标题是《 React 常见的面...
  • sinat_17775997
  • sinat_17775997
  • 2017年04月09日 22:47
  • 12425

React 相关

一、React的生命周期 componentWillMount 当组件要被挂载时这个函数被调用,这意味着我们可以在此运行组件功能必须的代码,为由于render在组件生命周期里 被多次调用,我们一般会把...
  • L23hbc
  • L23hbc
  • 2016年12月22日 11:37
  • 154

idea react 热部署的另一个配置

  • sdzhangshulong
  • sdzhangshulong
  • 2017年12月04日 12:00
  • 112

React Native写了一个开眼App

一、前言 不想看我废话的直接github看代码 ,仓库地址:react-native-eyepetizer 更多关于React Native知识请关注Marno的简书专题《...
  • sinat_17775997
  • sinat_17775997
  • 2017年02月17日 17:14
  • 1158

React Native 高质量学习资料汇总

去年我整理过一份《平安科技移动开发二队技术周报(特别版のReact Native专题)》,作为 React Native 入门的学习资料,半年多过去了,React Native 发布也已经一年多了,随...
  • u012992171
  • u012992171
  • 2016年07月11日 11:14
  • 2755

Spring集成React用来开发前端----SpringMVC + react 开发实时测试

之前的博客主要是写了如何用maven将webpack功能开启用于打包react相关的组件成bundle.js,并把bundle.js导入HTML中,这里主要介绍一下如何在项目开发中随时查看react修...
  • linfujian1999
  • linfujian1999
  • 2017年05月26日 21:16
  • 3565

sublime中支持React的Snippets片段插件--ReactJS

sublime-reactSnippets for ReactJS. This package used to provide JSX syntax highlighting and has been...
  • itpinpai
  • itpinpai
  • 2016年12月16日 14:16
  • 1616
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React相关
举报原因:
原因补充:

(最多只允许输入30个字)