react

componentWillMount 在渲染前调用,在客户端也在服务端。 componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。 componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。 shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。 componentWillUpdate 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。 componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。 componentWillUnmount 在组件从 DOM 中移除的时候立刻被调用。 来源： https://www.cnblogs.com/zouqin/p/6429143.html

博客来源 小寒的博客 定义好全局配置信息 环境变量不要提取出来，配置信息提取出来 UI样式变量 定义好变量的作用不用多说 样式库建设 工具样式，复用性强的样式，这些class成为会是真个网站样式的底层，将是很重要的一部分 工具函数 这个也不用多说，超级重要的，日常定义一些好的工具函数，说不定哪天就可以产生一个上万star的工具库了 功能封装 包括上传文件，支付，登录，数据返回处理 等等一系列的操作，其实每次都是一个同样的流程 不同的网站根据复用性的业务不同 面对这种问题，复制粘贴代码肯定是不明智的，我们需要维护一系列的功能复用性的工具 静态文件和icon 管理静态文件总是比较麻烦的，最可怕的就是突然的要求复用某个网页里专属的文件，同时cdn建设也很重要，那么这些公共资源如何管理也是一件很重要的事情 尤其是icon的建设 ---------------------------分界线------------------------- 以上是常见的复用功能的做法 以下是react项目开发需要注意的地方 UI库建设 UI库建设被放倒第一位的原因也是理所当然的 UI库建设可能在短期降低了开发效率，提高了维护成本，但长期来看，绝对肯定一定以及百分之百是值得的，建设UI库可以有让人意想不到的效果 更是为了保证换即使设计师也可以该组件库，整个网站风格就变了，还有包括间接性的接入第三方UI库

1.移动App第1天 什么是混合移动App开发【重点】 苹果上的软件是如何开发出来的：使用的是 OC、或者使用Swift这门语言 安卓平台上的软件又是如何开发出来的：使用安卓相关的语言开发的，Java，安卓的控件进行开发 苹果和安卓平台上共有的软件是如何开发出来的：腾讯招两套开发人员【开发组】，手机京东 前端移动 App（Application）开发技术，去开发手机端的应用程序； 前端的混合移动App开发技术，并没有使用 苹果 或 安卓 官方推荐的 开发平台和开发方式，而是抛弃了 官方提供的方式，使用 前端的独有的技术进行移动App开发体验； 什么是移动App开发：通俗的理解，就是把开发Web网站的技术（HTML+CSS+JS），通过某种方式，移植到移动App开发上进行使用，这种利用Web开发技术进行移动端开发体验的方式，叫做混合移动App开发！ 关于移动App开发，需要知道的几个概念： 原生开发：它的英文单词是（NativeApp）,指的就是使用 IOS、Android 官方提供的工具、开发平台、配套语言进行 手机App开发的方式； 混合开发：（HybirdApp）就是使用前端已有的技术，HTML + CSS + JS ，然后再搭配一些相关的打包编译技术，就能够开发出一个手机App，安装到手机中进行使用； 什么是App：App是（Application的缩写），意思是

1、安装style-loader和css-loader依赖 cnpm i style-loader css-loader -D 2、在webpack.config.js文件增加loader配置 module: { //所有第三方模块的配置规则 rules: [ {test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/}, {test: /\.css$/, use: ['style-loader', 'css-loader?modules']} ] }, 3、这样就可以正常使用CSS样式了 来源： CSDN 作者： sg_knight 链接： https://blog.csdn.net/sg_knight/article/details/104448516

2.1、什么是Ant Design？ Ant Design是阿里蚂蚁金服团队基于React开发的ui组件，主要用于中后台系统的使用。官网：https://ant.design/index-cn 设计语言： 随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 Ant Design。基于『确定』和 『自然』的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。 特性： 提炼自企业级中后台产品的交互语言和视觉风格。开箱即用的高质量 React 组件。 使用 TypeScript 构建，提供完整的类型定义文件。全链路开发和设计工具体系。 2.2、开始使用 2.2.1、引入Ant Design Ant Design 是一个服务于企业级产品的设计体系，组件库是它的 React 实现，antd 被发布为一个 npm 包方便开发者安装并使用。 在 umi 中，你可以通过在插件集 umi-plugin-react 中配置 antd 打开 antd 插件，antd 插件会帮你引入 antd 并实现按需编译。 在config.js文件中进行配置： 2.2.2、小试牛刀 接下来，我们开始使用antd的组件，以tabs组件为例，地 址

react全家桶从0到1(最新) 本文从零开始，逐步讲解如何用react全家桶搭建一个完整的react项目。文中针对react、webpack、babel、react-route、redux、redux-saga的核心配置会加以讲解，通过这个项目，可以系统的了解react技术栈的主要知识，避免搭建一次后面就忘记的情况。 从webpack开始 思考一下webpack到底做了什么事情？其实简单来说，就是从入口文件开始，不断寻找依赖，同时为了解析各种不同的文件加载相应的loader，最后生成我们希望的类型的目标文件。 这个过程就像是在一个迷宫里寻宝，我们从入口进入，同时我们也会不断的接收到下一处宝藏的提示信息，我们对信息进行解码，而解码的时候可能需要一些工具，比如说钥匙，而loader就像是这样的钥匙，然后得到我们可以识别的内容。 回到我们的项目，首先进行项目的初始化，分别执行如下命令 mkdir react-demo // 新建项目文件夹 cd react-demo // cd到项目目录下 npm init // npm初始化 引入webpack npm i webpack --save touch webpack.config.js 对webpack进行简单配置，更新webpack.config.js const path = require('path'); module

1、为什么使用redux？ 在小型react项目的开发中 ，view（视图层）中的数据模型（即数据），可以存放在组件中的 state 对象，换句话说页面中的动态数据存放在 state 中。 但对于开发大型复杂的项目来说，单页面管理的状态（state）会有很多很多。管理不断变化的状态非常困难，状态的改变可能会引起页面的变化， 而页面的变化也会引起状态的变化，这种变化异常复杂，以至于我们很难捋清业务实现功能，为此我们用到了 redux，使用 redux 管理大量的状态（state）。 2、什么情况下不使用redux？ UI层非常简单（页面动态数据少） 不需要与服务器大量交互，也没有使用WebSocket view（视图层）数据来源是单一的。 3、什么情况下要使用 redux？ 某个组件的状态需要共享 某个状态需要在任何地方都可以拿到 一个组件需要改变全局状态 一个组件需要改变另一个组件的状态 4、redux 的实现原理是什么 ？ 我们知道视图的数据来源于state，或者说是一一对应的。redux 只是把所有复杂的状态抽离出来保存在一个对象里面， 当视图层需要用到数据的时候，通过模块导入这个对象即可。 5、在使用 redux 之前我们需要了解 redux 模块中的几个基本概念。 ① Store 可以看作为 redux 的核心，因为它是存放数据的地方

原文： https://www.jianshu.com/p/81e9e9eaf8fa connect() React-Redux 提供connect方法，用于从 UI 组件生成容器组件。connect的意思，就是将这两种组件连起来。 import { connect } from 'react-redux' const VisibleTodoList = connect()(TodoList); 上面代码中，TodoList是 UI 组件，VisibleTodoList就是由 React-Redux 通过connect方法自动生成的容器组件。 但是由于没有定义业务逻辑，上面这个 容器组件没有实际yiyi，为了实现业务逻辑，需要满足厦门的信息 1）输入逻辑，外部的数据（state对象）转换为UI组件的参数 2）输出逻辑，用户发出的动作怎么变成Action对象，从UI组件传出去 完整的connect方法 import { connect } from 'react-redux' const VisibleTodoList = connect( mapStateToProps, mapDispatchToProps )(TodoList) 　mapStateToProps负责输入逻辑 state映射到UI组件的参数（props） mapDispatchToProps 负责输出逻辑

有时候 App 需要访问平台 API ，但 React Native 可能还没有相应的模块包装；或者你需要复用一些 Java 代码，而不是用 Javascript 重新实现一遍；又或者你需要实现某些高性能的、多线程的代码，譬如图片处理、数据库、或者各种高级扩展等等。 我们把 React Native 设计为可以在其基础上编写真正的原生代码，并且可以访问平台所有的能力。这是一个相对高级的特性，我们并不认为它应当在日常开发的过程中经常出现，但具备这样的能力是很重要的。如果 React Native 还不支持某个你需要的原生特性，你应当可以自己实现该特性的封装。 Toast 模块 本向导会用 Toast 作为例子。假设我们希望可以从 Javascript 发起一个 Toast 消息（ Android 中的一种会在屏幕下方弹出、保持一段时间的消息通知） 我们首先来创建一个原生模块。一个原生模块是一个继承了 ReactContextBaseJavaModule 的 Java 类，它可以实现一些 JavaScript 所需的功能。我们这里的目标是可以在 JavaScript 里写 ToastAndroid.show('Awesome', ToastAndroid.SHORT); ，来调起一个 Toast 通知。 ReactContextBaseJavaModule 要求 派生类实现

react父子组件传参 父级向子级传参：在父组件中，我们引入子组件，通过给子组件添加属性，来起到传参的作用，子组件可以通过props获取父组件传过来的参数。 在父组件中： import React from 'react' import ChildCom from './childCom.js' class ParentCom extends React.Component { render() { return ( <div> <h1>父组件</h1> <ChildCom content={'我是父级过来的内容'}/> </div> ) } } export default ParentCom; 在子组件中： import React from 'react' class ChildCom extends React.Component { render() { return ( <div> <h2>子组件</h2> <div> {this.props.content} </div> </div> ) } } export default ChildCom; 子级向父级传参：在父组件中给子组件添加一个属性，这个属性的内容为一个函数，然后在子组件中调用这个函数，即可达到传递参数的效果 在子组件中： import React from 'react' class ChildCom