react中state和props变化会造成render的重新渲染,有时候我们会在render函数中进行一些稍微复杂的逻辑运算 比如说,像下边这种 在props中将 industries引入,然后对其进行筛选,筛选出符合条件的子项有对其进行遍历制造出Option选项,这样写其实并不优雅,会使render变得很臃肿,现在有一种类似于vue的计算属性,可以将之完全抛离. 我们可以将这几步写到一个函数里进行操作,然后在return想要的结果  …

1.在 React 中,render 函数中 return 的内容只能有一个根节点,如果多个元素嵌套,需要用一个标签元素包裹 这个包裹的标签通常用 div,示例如下: class App extends Component { render() { return ( <div> <h1>大标题</h1> <h2>小标题</h2> </div> ); } } 此时 #root 下的结构: 2.如果不加 div,会报错 示例如下: cla…

组件就是页面上的一部分.如图,左边是一个网页.右边是对应的一个组件图.我们可以把一个大的网页拆分成很多小的部分.比如标题部分,对应一个组件,就是标题组件.搜索部分,对应的组件就是搜索组件.而这个搜索组件我们可以进一步的拆分,是由input框和button组成的.所以还可以继续把搜索组件拆分成小的组件.一个是input组件,一个是button组件.页面上很多区域也可以拆分成组件,所以页面就被拆分成了很多个组件.一个页面很复杂,有时候很难编写,但当我们把他拆分成组件的时候,再来维护这些小组件的时候就…

React组件复用 React组件复用的方式有两种: 1.render Props模式 2.高阶组件HOC 上面说的这两种方式并不是新的APi. 而是利用Raect自身的编码特点,演化而来的固定编码写法. 什么是render Props模式 1.把prop是一个函数并且要告诉组件要渲染什么内容的技术,叫做render Props模式. 2.注意的是:并不是该模式叫做render Props就必须使用名为render的props, 实际上可以使用任意的props. 对上面者一句话的详细说明: 子组…

react组件中的constructor和super小知识 1.react中用class申明的类一些小知识 如上图:类Child是通过class关键字申明,并且继承于类React. A.Child的类型是?   typeof  Child   ===  'function'  , 其实就相当于ES5用function申明的构造函数    function Child() {  //申明构造函数  } B.Child类调用时候(  new Child() ),会优先执行,并且自动执行Child的c…

在使用react 中经常会遇到各种个样的问题,如果对react不熟悉则会对遇到的问题感到莫名其妙而束手无策,接下来分析一下react中容易遇到的问题和注意点. 1.setState()是异步的this.setState()会调用render方法,但并不会立即改变state的值,state是在render方法中赋值的.所以执行this.setState()后立即获取state的值是不变的.同样的直接赋值state并不会出发更新,因为没有调用render函数. 2.组件的生命周期componentW…

function createElement(type, config, children) { // 1. 创建一个对象 // 2.根据参数config修改这个对象 // 3.把children参数作为对象中props中的一个属性 let virtureDOM = {}; virtureDOM.type = type; virtureDOM.ref = config.ref || null; virtureDOM.key = config.key || null; let props = {}…

本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万恶之源) -- Pete Hunt 有人说 Immutable 可以给 React 应用带来数十倍的提升,也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明,因为同期 React 太火,它的光芒被掩盖了.这些至少说明 Immutable 是很有价值的,下面我们来一探究竟.…

这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 第三篇:优化单页面开发环境:webpack与react的运行时打包与热更新 第四篇:React配合Webpack实现代码分割与异步加载 第五篇:分离Webpack开发环境与生产环境的配置 第六篇:在React中使用Redux 这篇文章的主要内容包括: 1. 修改一下之前存在的…

copy from : https://blog.csdn.net/smk108/article/details/85053903 Mobx提供了一个mobx-react包帮助开发者方便地在React中使用Mobx,mobx-react中有observer.Provider.inject几个常用的api.在<mobx系列(二)-mobx主要概念>中我们已经介绍过observer,本文介绍下inject.Provider,以及Mobx如何与React结合使用. 1.Provider Provid…