react

工作中要对一个表格做再次更新, 可能是渲染后更新或者部分组件渲染之后, 对页面效果做处理 之前对react的理解, 仅仅停留在render渲染. 这次好好理解了下react的生命周期 1 react组件有三种状态 Mounted(已插入真实的DOM) Updating(正在被渲染) 和 Unmounted已移除真实DOM 2 每个状态有两种处理方法 will(进入状态之前调用) 和 did(进入状态之后调用) 3 三种状态总共有5种处理方法, componentWillMount(插入真实DOM之前调用) componentDidMount(插入真实DOM之后调用) componentWillUpdate(被渲染之前调用) componentDidUpdate(渲染之后调用) 和 componentWillUnmount(移除之前调用) 4 当然还有组件初始方法: getDefaultProps(获取默认属性) 和 getInitialState(获取初始状态), 5 还有两种特殊方法: componentWillReceiveProps(object nextProps)(已加载的组件收到新的参数时调用) 和 shouldComponentUpdate(object nextProps, object nextState)(判断组件是否需要重新渲染时调用) 生命周期 1

　　React条件性渲染的方式和Vue是不同的，之前用vue做项目时觉得vue是在是强大，通过v-if就可以选择性的渲染组件，另外，对于列表的渲染更是方便，一个v-for就可以进行快速的渲染，但是React无论在条件性渲染还是列表渲染，我觉得都非常的麻烦。 发点牢骚~ 也许后面可以体会到React的强大吧。 　　官网上对于条件渲染有系统的介绍，下面列举两种常用的方式。 　　1、对于function 创建组件的方式，我们直接通过if(){}判断即可，如果符合条件，就return一个组件，如果不符合，就return另外一个。 　　2、对于extends React.Component() 的方式，我们一般是在jsx中使用{}，来写js，常用的做法是 !!bool && <div></div> 这种方式，当然，我们还可以通过三目运算符的方式进行渲染。 如下所示： import React from 'react'; require('./log.less'); class Log extends React.Component { render () { var bool = this.props.isUp; return ( <div className="sign-wrap"> <h2>Wayne Chat</h2> <div className="form-control">

一、条件表达式渲染 （ 适用于两个组件二选一的渲染） 1 render() { 2 const isLoggedIn = this.state.isLoggedIn; 3 return ( 4 <div> 5 {isLoggedIn ? ( 6 <LogoutButton onClick={this.handleLogoutClick} /> 7 ) : ( 8 <LoginButton onClick={this.handleLoginClick} /> 9 )} 10 </div> 11 ); 12 } 二、 && 操作符渲染 (适用于一个组件有无的渲染) 1 function Mailbox(props) { 2 const unreadMessages = props.unreadMessages; 3 return ( 4 <div> 5 <h1>Hello!</h1> 6 {unreadMessages.length > 0 && 7 <h2> 8 You have {unreadMessages.length} unread messages. 9 </h2> 10 } 11 </div> 12 ); 13 } 三、利用变量输出组件 渲染 （适用于有多个组件多种条件下的渲染） 1 render() { 2 const isLoggedIn = this.state

前言 昨天阿里内推电面一面，面试官了解到项目中用过Vue，就问为什么前端框架使用Vue而不适用其他的框架，当时就懵了。因为只用过Vue，不了解其他两个框架，今天就赶紧去了解一下他们之间的区别。大家发现如果本文中哪个地方不对，欢迎来访。 React与Vue对比 相似点： 使用 Virtual DOM 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。 区别： 在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。如要避免不必要的子组件的重渲染，你需要手动实现；在 Vue 应用中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重渲染，开发者不需要考虑组件是否需要重新渲染之类的优化。 在React中，一切都是JavaScript，所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖。你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面；在Vue中有自带的渲染函数，Vue也支持JSX，Vue官方推荐使用模板渲染视图。组件分为逻辑类组件和表现类组件。 组件作用域内的CSS。CSS 作用域在 React 中是通过 CSS-in-JS 的方案实现的

react的生命周期分为三个状态： 　　1.初始化　　2.更新　　3.销毁 　　一.初始化 　　　　 getDefaultProps() 设置默认的props，也可以用dufaultProps设置组件的默认属性. getInitialState() 在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。此时可以访问this.props componentWillMount() 组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。 render() react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。 componentDidMount() 组件渲染之后调用，只调用一次。 　　二. 更新 　　　　 componentWillReceiveProps(nextProps) 组件初始化时不调用，组件接受新的props时调用。 shouldComponentUpdate(nextProps, nextState) react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树

1. 首先，下载react-developer-tools开发调试工具插件。 因为谷歌插件下载需要翻墙，这里提供一个本地资源：https://www.crx4chrome.com/crx/3068/ 谷歌下载.crx 后缀的文件， 火狐下载.xpi 后缀的文件。 2. 插件安装（以谷歌为例） 打开谷歌浏览器，在路劲栏输入： chrome://extensions/ 将下载的插件拖入谷歌浏览器，然后选中允许访问文件网址。 点击详细信息 React Developer Tools会自动检测React组件，不过在webpack-dev-server模式下，webpack会自动将React组件放入到iframe下，导致React组件检测失败，变通方法是webpack-dev-server配置在--inline模式下即可。 3. 在chrome浏览器，会出现React，右侧props--组件属性，state--组件状态。 来源： https://www.cnblogs.com/Super-scarlett/p/8657572.html

React项目建议 一.React+ES6+Redux+ant-design+webpack 二.建议加入eslint插件到编辑器中，帮助我们检查Javascript编程时的语法错误 基础规范 component 文件夹中，展示组件文件名，样式文件名，采用大驼峰命名，如：Login.js 、Login.less containers 文件夹中，容器组件文件名，采用大驼峰命名，如：Login.js 对应的展示组件和容器组件最好命名一致，便于查找和管理 Component 展示组建书写规范 一.创建展示组建 import React from 'react'; import PropTypes from 'prop-types'; class Demo extends React.Component { // prop 初始化 static propTypes = { } static defaultProps = { } // state 初始化 constructor(props) { super(props); this.state = { demo: true }; // Init state in the constructor } 　 // 生命周期方法 componentWillMount () {} componentWillReceiveProps(nextProps

由于公司是外包性质，项目老是vue框架和react框架交替着开发，导致开发一段时间vue又把react的东西忘记了，反之亦然。所以在这里记录下react的开发简要，方便以后查询。 　　 脚手架相关 　　react采用的是自己开发的脚手架：create-react-app，全局安装，然后键入dos命令：create-react-app （项目文件夹） 即可初始化react脚手架项目包，但是注意下载源和npm版本 过低都会造成依赖模块丢失或者下载不了的问题，建议源切换为国外的。这里推荐一款npm下载源管理的工具： nrm（具体使用方法：https://www.npmjs.com/package/nrm） 　　 es6相关 　　由于项目大部分都是采用es6~es7语法开发了，react关于es6的语法 ： https://babeljs.io/blog/2015/06/07/react-on-es6-plus ，兼容性就找babel-polyfill吧 　　 react入门相关 　　react中的组件分为普通组件和容器组件（我理解为业务组件），普通组件只负责简单的数据渲染，不做逻辑处理，最简单的组件可以这样写： 1 // 这样就相当于一个普通组件了 2 const Test = (props) => <div>测试组件</div> 3 4 export default class

react 的生态在web端，移动端，服务器端，VR领域都有涉及。 react本身是面向web端的，它很轻便灵活，只是MVC架构中的view(视图)层。由于只是view层，所以它需要配合生态体系中的其他框架或模块来使用。 以下选择都是 github 上 star 最多的。 必备 路由 react-router 状态管理 redux，react-redux，dva redux 和 react-redux 的区别： redux是独立的应用状态管理工具。它是可以独立于react之外的。如果我们需要在react当中运用它，那么我们需要手动订阅store的状态变化，来对我们的react组件进行更新。那么react-reudx这个工具，就帮我们实现了这个功能，我们只需对store进行处理，react组件就会有相应的变化。 Redux提供的API: store, action, reducer react-redux提供的API: connect: 将store作为props注入 Provider: 使store在子孙组件的connect中能够获取到。 集成 另外国内蚂蚁金服前端团队基于redux, react-router打造了另一个前端框架——dva。 如果你选择redux方案，那么建议直接使用dva。 UI库 ant design，ant design pro（开箱即用的管理系统） umi

一个简单的react面试题： 将下面的jsx语法，写成react语法： return ( < div > < ul className = "list-li" > < li > JavaScript < / li > < li > html < / li > < / ul > < / div > ) 改写后的代码如下： var child1 = React . createElement ( 'li' , null , 'JavaScript' ) ; var child2 = React . createElement ( 'li' , null , 'html' ) ; var root = React . createElement ( 'ul' , { className : 'list-li' } , child1 , child2 ) 来源： CSDN 作者： q2018753540 链接： https://blog.csdn.net/qq_39721418/article/details/104079928