react | 易学教程

react的生命周期

阅读更多关于 react的生命周期

什么是声明周期？组件本质上就是状态机，输入确定，输出一定确定。如何理解这一点？react有两个特点，第一个就是去除了所有的手动dom操作，也就是使用jsx。第二个就是组件把状态和结果一一对应起来，从而能够直观的看出来，程序在不同的状态是的输出。属性是由父组件传递给子组件的，状态是子组件内部维护的一些数据，当状态发生变化时候，组件也会进行更新，因此我们可以理解成一个state对应一个render的结果，这样我们就可以知道在不同的state下，组件会render出什么样的结果，从而就知道组件在页面上展示的内容是什么。状态机本质上就是状态和转移的结合，我们刚才说过，不同的状态对应不同的输出，状态和状态之间有时候会发生转换，当状态发生转变的时候，会触发不同的钩子函数，从而让开发者有机会做出相应，因为状态转换是由react来进行维护的。作为开发者没有办法直接的参与到状态转换中，但是react给我们提供了很多钩子函数，我们可以自己来编写这些钩子函数，这样react在进行状态转换的时候，就可以调用我们的状态函数。我们也可以用事件的思路来理解状态，开发者不知道什么时候会发生事件，但是我们可以决定在发生事件的时候，执行什么动作，也就是事件的监听器，状态和事件有一些类似，他们的区别是事件和事件之间没有直接的关系，每个事件都是独立发生的，但是状态和状态之间是有关系的，组件可以处于不同的状态中

React框架随笔

阅读更多关于 React框架随笔

React框架随笔现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS，ReactJs的虚拟DOM（Virtual DOM）和组件化的开发深深的吸引了我，现将所得记下来。一、React简介 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。二、对ReactJS的认识及ReactJS的优点首先，对于React，有一些认识误区，这里先总结一下 React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式； React的服务器端Render能力只能算是一个锦上添花的功能，并不是其核心出发点，事实上React官方站点几乎没有提及其在服务器端的应用；有人拿React和WebComponent相提并论，但两者并不是完全的竞争关系，你完全可以用React去开发一个真正的Web Component； React不是一个新的模板语言

渲染列表数据

阅读更多关于渲染列表数据

列表数据在前端非常常见，我们经常要处理这种类型的数据，例如文章列表、评论列表、用户列表…一个前端工程师几乎每天都需要跟列表数据打交道。 React.js 当然也允许我们处理列表数据，但在使用 React.js 处理列表数据的时候，需要掌握一些规则。我们这一节会专门讨论这方面的知识。渲染存放 JSX 元素的数组假设现在我们有这么一个用户列表数据，存放在一个数组当中： const users = [ { username: 'Jerry', age: 21, gender: 'male' }, { username: 'Tomy', age: 22, gender: 'male' }, { username: 'Lily', age: 19, gender: 'female' }, { username: 'Lucy', age: 20, gender: 'female' } ] 如果现在要把这个数组里面的数据渲染页面上要怎么做？开始之前要补充一个知识。之前说过 JSX 的表达式插入 {} 里面可以放任何数据，如果我们往 {} 里面放一个存放 JSX 元素的数组会怎么样？ ... class Index extends Component { render () { return ( <div> {[ <span>React.js </span>, <span>is </span>

React-组件的生命周期

阅读更多关于 React-组件的生命周期

1.组件的生命周期组件的生命周期分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲染 Unmounting：已移出真实 DOM React 为每个状态都提供了两种处理函数， will 函数在进入状态之前调用， did 函数在进入状态之后调用，三种状态共计五种处理函数。 componentWillMount() ---render之前最后一次修改状态的机会 componentDidMount() ---成功render并渲染完成真实DOM之后触发，可以修改DOM componentWillUpdate(object nextProps, object nextState) componentDidUpdate(object prevProps, object prevState) componentWillUnmount() 此外，React 还提供两种特殊状态的处理函数。 componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用 shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用注意： render只能访问this.props和this.state ，只有一个顶层组件

react 的props和state

阅读更多关于 react 的props和state

props 　　当前组件的组件标签身上的所有属性和子节点构成的集合；　　可以用来组件传递数据，一般用于父子组件之间；　　this.props对象的属性与组件的属性一一对应，但对于组件标签的子节点，this.props.children属性的值有三种可能：　　　　　　1、如果当前组件没有子节点，为underfined；　　　　　　2、如果有一个子节点，类型为object；　　　　　　3、如果是多个子节点，就为array。 react提供一个工具方法，React.Chilren来处理this.props.children。可以用React.Chilren.map来遍历所有子节点 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/react.js"></script> <script src="js/react-dom.js"></script> <script src="js/browser.min.js"></script> </head> <body> <div id="app"> </div> </body> </html> <script type="text/babel"> let Hello = React.createClass({

【JAVASCRIPT】React学习-巧用 props 的 children 属性实现内容填充

阅读更多关于【JAVASCRIPT】React学习-巧用 props 的 children 属性实现内容填充

背景平常写组件，经常遇到需要获取内容放入组件内部的情形。实现方法我们有两种实现方式 1. 自定义 props render 的时候通过获取 this.props.content 填充到组件内部 const content = (<ul><li><span>分析1<span></li><li><span>分析1<span></li></ul>); <Panel content={content} /> render () { return (<div> {this.props.content} </div>); } 2. 利用 props 的 children 一般 props 是与用户定义的组件一一对应，但有一个例外 children ，表示组件内部的所有子节点。我们可以利用这个 props 属性，省略自定义content属性，直接获取this.props.children填充入组件。这种方法的好处在于层级关系明显，因为内部节点有时候会很复杂，如果用自定义props属性，没法很快看清楚节点之间的包含关系。注意点： this.props.children 的值有三种可能，处理 this.props.children 的时候要注意判定： 1）如果当前组件没有子节点，是 undefined ; 2）如果有一个子节点，数据类型是 object ； 3）如果有多个子节点

React 入门之路(1)

阅读更多关于 React 入门之路(1)

React 是由 Facebook 公司推广的一套框架，已经应用 instagram 等产品 React 就是为了提供应用程序性能而设计的一套框架在以前学的 angular 中，对 dom 提供了一些指令，让 dom 具有一些功能，例如 ng-repeat 让 dom 具有动态循环渲染的功能， ng-show 让 dom 元素具有动态显隐的功能等等比如将页面比作一辆汽车， Angular 的实现就是为汽车添加一些装饰，增加一些功能，让汽车看上去很高大尚，这样势必要加大油门 React 的实现就是重新制造一辆汽车，是有四个轱辘，即可启动，不要很大的油门 React 有三大创新虚拟 dom 组件开发多端适配一处开发，处处适用体验 react https://github.com/ facebook/react 在 0.13 版本后， react 做了一个处理将 react 文件分成两个部分（创建虚拟 dom ，渲染虚拟 dom 的） React.js 核心库文件（创建虚拟 dom 的，核心模块，写的应用程序可以兼容所有端） React-dom.js 在浏览器端渲染虚拟 dom 创建虚拟 dom 由 react 对象提供的一个方法 createElement 第一个参数表示虚拟 dom 的名称，例如 div 有时我们还可以传递组件第二个参数是一个对象，表示虚拟 dom

我的React实例 - TodoList

阅读更多关于我的React实例 - TodoList

都说真正入门一个前端框架都要用它来写一个todo-list，现在写了两三天的todo-list（还未写完），发现所言不虚。现在我就将我已经完成的过程和未完成的部分一起写下来，同时慢慢与我的进度同步。练习链接： https://github.com/dirstart/React-learning/tree/master/todo-list1 版本1链接： https://github.com/dirstart/My-React-Todolist --使用create-react-app+react 版本2链接： https://github.com/dirstart/My-React-Todolist-v2.0 --使用webpack+react+redux+react-redux 项目版本1- github演示地址： https://dirstart.github.io/My-React-Todolist/build/ 我学习一门语言总是习惯于直接创建一个语言名-learning ，然后里面放着很多垃圾代码和一些项目，如我的vue-learn,react-learnning现在想来这样还真是凌乱，于是这次单独把todo-list放一个仓库，这里有如何将原仓库内的文件转为仓库的骚操作，在第三序列里面。 http://www.cnblogs.com/can-i-do/p

React常用hook的优化useEffect浅比较

阅读更多关于 React常用hook的优化useEffect浅比较

先说说react原版的useEffect使用起来不便的地方 useEffect( function() { // effect操作 }, ['a', 'b', { name: 'c' }] ); 这里的effect每次更新都会执行，因为第三个参数一直是不等的，{name: 'c'} !== {name: 'c'} 第二是在deps依赖很多的时候是真的麻烦下面贴出改进版useEffect import { useRef, useEffect } from 'react'; import _ from 'lodash'; export function useDeepCompareEffect<T>(fn, deps: T) { // 使用一个数字信号控制是否渲染，简化 react 的计算，也便于调试 let renderRef = useRef<number | any>(0); let depsRef = useRef<T>(deps); if (!_.isEqual(deps, depsRef.current)) { renderRef.current++; } depsRef.current = deps; return useEffect(fn, [renderRef.current]); } 在使用的时候什么都不用做，只需要把参数传进来就行。避免了之前的浅比较的缺陷

React封装强业务hook的一个例子

阅读更多关于 React封装强业务hook的一个例子

最近因为使用列表展示的需求有点多，就想着把列表分页筛选的逻辑抽象一下。看了umi的一个useTable的hook，也不能满足业务需要，于是就自己写了一个，支持本地分页筛选和接口分页筛选。思路就是，筛选的字段都使用form表单控制，然后在hook里面将form和table联合起来。下面贴出源码 1 import { TableProps, PaginationProps } from '@slardar/antd'; 2 import React, { useEffect } from 'react'; 3 import { 4 PaginationConfig, 5 SorterResult, 6 TableCurrentDataSource 7 } from 'antd/lib/table'; 8 import { useDeepCompareEffect } from '@byted-woody/slardar'; 9 10 export type WrappedFormUtils = any; 11 12 export interface TableControlState<T> extends TableProps<DataRow> { 13 pagination: PaginationProps; 14 sorter?: SorterResult<DataRow>;

订阅 react