react

跟我一起学 React + dva + Mockjs（9 个视频） 跟我一起学 React + dva + Mockjs #1 课程介绍 「04:21」 跟我一起学 React + dva + Mockjs #2 开始玩起来 「05:58」 跟我一起学 React + dva + Mockjs #3 真实项目中如何来维护 API 「Pro」「02:49」 跟我一起学 React + dva + Mockjs #4 另一种方式 「Pro」「02:52」 跟我一起学 React + dva + Mockjs #5 处理 JSON 「Pro」「02:17」 跟我一起学 React + dva + Mockjs #6 开始 & 安装 「Pro」「04:50」 跟我一起学 React + dva + Mockjs #7 数据模板定义 「Pro」「03:52」 跟我一起学 React + dva + Mockjs #8 数据占位符定义 「Pro」「04:16」 跟我一起学 React + dva + Mockjs #9 总结与学习方法（完结） 「Pro」「03:24」 来源： oschina 链接： https://my.oschina.net/u/2417355/blog/3168643

运行react项目时报错 caniuse-lite is outdated. please run next command 然后你运行了他给的npm update……还是不行， 在网上找了这个方法，可行： Solution: Close Visual Studio Head to C:\Users\USERNAME\AppData\Local\Temp\WebCompilerX.X.X ( X is the version of WebCompiler ) Delete following folders from node_modules folder : caniuse-lite and browserslist Open up CMD ( inside C:\Users\USERNAME\AppData\Local\Temp\WebCompilerX.X.X ) and run: npm i caniuse-lite browserslist Done! 就是去你的 node_modules 下删除 caniuse-lite 和 browserslist两个文件夹，记住这个文件夹， 再执行npm命令重新安装，如果没安装到上面这个文件夹下，那么就复制一份过去， 原文在 这里 ， 来源： https://www.cnblogs.com/1394htw/p/11023377

React的常用的声明周期钩子函数 数据初始化阶段 组件初始化会执行的四个钩子函数 1.constructor( props, context) //初始化动作 //用于初始化数据 2.static getDerivedStateFromProps(props,state) //静态方法 不能使用this 不实例化也可以通过 类名.方法名 来调用 能实时更新父组件传递过来的参数 3.render() 这个方法是必须的,当他被调用是,他讲计算 this.props和this.state 并返回以下一种类型 React 元素,通过 jsx 创建,既可以是 dom元素,也可以是用户自定义的组件 字符串或数字,他们将会以文本节点形式渲染到dom中 null,什么也不许安然 布尔值,也是什么都不许安然 4.componentDidMount 组件呗装配后立即调用,初始化时的DOM节点应该进行到这里 通常在这里进行 ajax 请求 如果要初始化第三方的dom库，也是在这里进行初始化 只有到这里才能获取到真是的dom节点 更新阶段的常用的四个钩子函数 1.shouldComponentUpdate(nextProps,nextState){ return boole } 判断组件是否需要更新 返回值是一个布尔值 true 就进行渲染 flase 就会渲染 默认为 true 如果

从vue来到了react，很多相似之处，还好，自我感觉生命周期函数就是个执行过程，生命周期函数（钩子函数）通俗的说就是在某一时刻会被自动调用执行的函数 从React生命周期官方了解 componentWillMount 在渲染前调用,在客户端也在服务端。 componentDidMount 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。 componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。 shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。 componentWillUpdate 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。 componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。 componentWillUnmount

react 基础路由 首先需要安装路由插件： npm i react-router-dom 然后在App.js中导入： import { BrowserRouter as Router , Switch , Route , Link } from 'react-router-dom' ; 写两个组件: Home组件： import React , { Component } from 'react' export default class Home extends Component { render ( ) { return ( < div > 首页 < / div > ) } } List组件： import React , { Component } from 'react' export default class List extends Component { render ( ) { return ( < div > 列表 < / div > ) } } 在App.js中导入组件： < div className = "App" > < Router > < Link to = "/" > 首页 < / Link > < Link to = "list" > 列表 < / Link > < Switch > < Route path = "/" component

react生命周期笔记整理 查看官网 挂载阶段 constructor(props,content) 初始化state、 事件处理函数绑定this Static getDerivedStateFromProps(props,state) 1、 父组件的值传给子组件state的属性做为值 派生状态 2、 静态方法不能用this,调用是用 类.静态方法名 3、 返回一个对象更新状态或者null表示新的props不需要任何state更新 4、 父组件的props更改所带来的重新渲染也触发此方法 5、 Fiber：新算法(可自行百度查找文献) render() ##### 被调用时计算this.props和this.state并返回以下类型： 1、 React元素（可以是dom元素也可以是自定义组件） 2、 字符串、数字（以文本节点形式渲染到dom） 3、 Null、布尔值 （不渲染） 4、 不能直接返回对象 5、 不能返回两个标签，只能有一个，当返回两个时以下操作 Import {Fragment} from ’react’ <Fragment> <div></div> <div></div> </Fragment> 也可以如下( Fragment 空标记 相当于 <></> ) <><div></div></> componentDidMount() 1、 获得真实的dom节点 2、

​ 借用知乎大神的图 第一阶段Initialization(初始化阶段) import React, { Component } from 'react'; class Test extends Component { constructor(props) { super(props); } } 第二阶段Mounting(挂载阶段) 四个钩子函数的执行顺序,以及参数 a.constructor(props,context) b.getDerivedStateFromProps(props,state) c.render d.componentDidMount 第三阶段Updation(更新阶段) a.shouldComponentUpdate(nextProps,nextState) 返回 true 就会执行render 返回 false 就会执行render 可以加条件减少不必要渲染,增加性能 PureComponent 进行浅比对,进行性能的优化(纯组件) 对无状态组件用 React.memo(组件) 我们把 参数是组件 返回值也是组件 这类组件叫做HOC 即高阶组件 其本质是高阶函数(map filter forEach ...) b. getSnapshotBeforeUpdate(prevProps,prevState) 必须和componentDidUpdate一起用

跨平台一直是老生常谈的话题，cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放，颇有一股推倒原生开发者的势头。本文将对当下跨平台移动开发的现状、实现原理、框架的选择等进行深度解析。 为什么我们需要跨平台开发？ 本质上，跨平台开发是为了增加代码复用，减少开发者对多个平台差异适配的工作量，降低开发成本，提高业务专注的同时，提供比web更好的体验。通俗了说就是：省钱、偷懒。 本篇主要以react-native、weex、flutter，结合资讯展望，深入聊聊当前跨平台移动开发的实现原理、现状与未来。至于为什么只讲它们，因为对比ionic、phoneGap，它们更于 “naive”。 一、原理与特性 目前移动端跨平台开发中，大致归纳为以下几种情况： react native、weex均使用Java作为编程语言，目前Java在跨平台开发中，可谓占据半壁江山，大有“一统天下”的趋势。 kotlin-native开始支持 iOS 和 Web 开发，（kotlin已经成为android的一级语言）也想尝试“一统天下”。 flutter是Google跨平台移动UI框架，Dart作为谷歌的亲儿子，毫无疑问Dart成为flutter的编程语言，如下图，作为巨头新生儿，在flutter官网也可以看出，flutter同样“心怀天下

从vue来到了react，很多相似之处，还好，自我感觉生命周期函数就是个执行过程，生命周期函数（钩子函数）通俗的说就是在某一时刻会被自动调用执行的函数 从React生命周期官方了解 componentWillMount 在渲染前调用,在客户端也在服务端。 componentDidMount 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。 componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。 shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。 componentWillUpdate 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。 componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。 componentWillUnmount

组件 ：组件是React的核心、精髓，组件的名字首字母要大写 1. 状态组件（类组件） class One extends React . Component { render ( ) { return ( < div > 我是一个状态组件 < / div > ) } } export default One ; 注意： * 状态组件是通过class来定义的，需要继承 React.Component 类 * render 方法返回的内容即是该组件的内容 * 类的名字即是组件的名字 * 属性是不允许被修改的，状态是可以修改的 * 状态：只有在状态组件当中才存在，它是允许被修改的，状态是从父级继承过来的 2. 无状态组件（函数组件） function One ( ) { return ( < div > One < / div > ) } export default One ; 注意： * 函数的名字即是组件的名字，函数的返回值即是组件的内容 * 返回的内容有且只能有一个根元素。 * 必须要有return 3. 受控组件 注意： * 下拉列表，文本框，单选，多选。如果该元素当中使用 value 属性，那么需要在该元素上增加 onChange 事件。 * 该组件会受到state的控制，如果要想改变文本的框的内容，需要通过 onChange 事件来改变 state *