猪齿鱼Choerodon平台使用 React 作为前端应用框架,对前端的展示做了一定的封装和处理,并配套提供了前端组件库Choerodon UI.结合实际业务情况,不断对组件优化设计,提高代码质量. 本文将结合Choerodon猪齿鱼平台使用案例,简单说明组件的分类.设计原则和设计模式,帮助开发者在不同场景下选择正确的设计和方案编写组件(示例代码基于ES6/ES7的语法,适于有一定前端基础的读者). 文章的主要内容包括: React 组件简介 组件分类 组件设计原则.最佳实践 组件设计模式简介

react 实现pure render的时候,bind(this)隐患 export default class Parent extends Component { ... render() { const {name,age} =this.state; return ( <div> <Child name={name} age={age} onClick={this._handleClick.bind(this)}></Child>//bug 所在 </div

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

引言 webpack插件CommonsChunkPlugin的主要作用是抽取webpack项目入口chunk的公共部分,具体的用法就不做过多介绍,不太了解可以参考webpack官网介绍: 该插件是webpack项目常用的一个优化功能,几乎在每个webpack项目中都会用到.使用该插件带来的好处: 提升webpack打包速度和项目体积:将webpack入口的chunk文件中所有公共的代码提取出来,减少代码体积:同时提升webpack打包速度. 利用缓存机制:依赖的公共模块文件一般很少更改或者不会更

react 的时候,总是会用到弹窗,并且各种各样的,一般来说,组件层级嵌套之后,就会出现 z-index层级覆盖的问题 这个时候,就需要一个公共的弹出层,然后我们将需要展示的组件,放到弹出层里面 下面是目录结构: dialog.jsx代码 import React, { Component } from 'react'; import { is, fromJS } from 'immutable'; import ReactDOM from 'react-dom'; import ReactCS

props是组件固有的属性集合,其数据由外部传入,一般在整个组件的生命周期中都是只读的,React的API顶层设计也决定了这一点.属性初值通常由React.createElement函数或者JSX中标签的属性值进行传递,并合并到组件实例对象的this.props中.事实上,组件接受静态信息的主要渠道就是props属性. 比如: var HelloBox = React.createClass({ render() { return <div>{'Hello'+this.props.myattr

刚在学习react的初始阶段,跑了一段代码 var  Mydom = React.createClass({ render:function(){ return <div> <input type='text' value='123'/> </div> } }) 但是一直出现109的错误,说是返回值出现了问题.最后发现是因为javaScript会自动给内容加上分号,如果不写在同一行或者不使用括号将return值包起来,那么自动给你加上分号,导致程序报错

所谓server render 即服务端渲染,这是为了解决现代前端框架下的单页应用在SEO方面不友好的问题. react 的SSR主要思路就是 1.将应用的根组件导出 如 <App /> 2.在服务器node端 引用 <App /> ,通过'react-dom/server'下的ReactSSR将组件转换成真实的DOM字符串,像这种 <div data-reactroot="">this is app component</div> 3.

More detail check LInk. Render Prop vs HOC: HOC version for withMouse: import React from 'react' import ReactDOM from 'react-dom' const withMouse = (Component) => { return class extends React.Component { state = { x: 0, y: 0 } handleMouseMove = (even

React Router v4 allows us to render Routes as components wherever we like in our components. This can provide some interesting use cases for creating dynamic routes on our applications. import React from 'react'; import { BrowserRouter as Router, Rou

There are many cases where we will need a catch-all route in our web applications. This can include 404-style routes when nothing is match or other use cases where where we receive an invalid route in React Router v4. We can use 'Switch' from 'react-

With React Router v4 the entire library is built as a series of React components. That means that creating nested Routes is as simple as creating any other nested element in your application. Parent route: <NavLink to="/menu">Menu</NavL

对于公共页面(导航栏nav.页头head.页尾footer)的抽取有三种方式:        1)基于iframe进行抽取,这种方式很有效,但比较老了,另外为了页面的自适应性,还得做不少工作:        2)如果是jsp页面,则可以通过<%@ include file="head.jsp"%>进行抽取        3)利用ajax进行页面加载,但有不少问题       基于Springboot后台开发框架,JSP虽然还是可以用,但已经强烈推荐使用Thymeleaf模板

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></scrip

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

方法一:Vue插件 1.概述 作用:满足vue之外的需求,特定场景的需求 比如说,让你在每个单页面组件里,都可以调用某个方法(公共方法),或者共享某个变量等 2.使用方法 [声明插件]- [写插件]-[注册插件]-[使用插件] 生命插肩和写插件是同时进行的,注册插件到Vue对象中,最后在Vue组件的时候使用写的插件 声明插件  插件的需求都是公共部分,所以会创建文件夹utils,里面创建一个js文件,基本内容如下: install的第一个参数Vue表示Vue的实例,也就是Vue对象,第二个参数o

截取七牛上传图片的后缀名: export function getInputKey(info){ let self = this; let obj = JSON.parse(info); let qiniuKey; let imaName; let imgSuffix; if(obj){ qiniuKey = obj.key; imaName = obj.fileName; imgSuffix = imaName.substring(imaName.lastIndexOf('.') + 1);

5).CRUD-员工列表实验要求:1).RestfulCRUD:CRUD满足Rest风格:URI: /资源名称/资源标识 HTTP请求方式区分对资源CRUD操作   普通CRUD(uri来区分操作) RestfulCRUD 查询 getEmp emp---GET 添加 addEmp?xxx emp---POST 修改 updateEmp?id=xxx&xxx=xx emp/{id}---PUT 删除 deleteEmp?id=1 emp/{id}---DELETE 2).实验的请求架构; thy

thymeleaf公共页面元素抽取 存在一种现象:两个文件的代码只有一部分代码不一样 其余的均相同,此时就可以提取公共的代码去简化开发 .抽取公共片段 <div th:fragment="copy"> © The Good Thymes Virtual Grocery </div> .引入公共片段 <div th:insert="~{footer :: copy}"></div> ~{templatename::sel

package cn.sxx.dao; import java.util.List; import cn.sxx.model.Dep; import cn.sxx.query.DepQuery; public interface BaseDao<T,Q> { public void save(T t); public void update(T t); public T getObj(Integer id); public void delete(Integer id); public voi

1.抽取公共片段 使用thymeleaf的th:fragment为样抽取的公共片段命名, 如下把div标签命名为 copy,就可以获取到div整个里的内容<div th:fragment="copy"> © 2011 The Good Thymes Virtual Grocery</div> 2.引入公共片段<div th:insert="~{footer :: copy}"></div>~{templatename: