react

最新文章

自定义React Hooks(记录先前状态):usePrevious

usePrevious Hoos可以用来存储props或以前的状态。 首先,创建一个接受值的Hook。 然后,我们使用useRef Hook为该值创建一个ref。 最后,使用useEffect记住最新值。代码示例:const usePrevious = value => { const ref = React.useEffect(); React.u

自定义React Hooks(超时):useTimeout

使用useTimeout Hook,我们可以使用声明式方法来实现setTimeout。 创建一个带有回调callback和延迟的Hook。 使用useRef为callback创建一个ref。两次使用useEffect。 一次用于记住最后一个回调,一次用于设置超时和清除。示例:const useTimeout = (callback, delay) => { cons

[译]5分钟学习React.js

本教程将通过构建一个非常简单的应用程序,让你对React.js有基本的了解。我会抛弃所有我认为不是核心的东西。如果你喜欢我的教学风格,在我们即将推出免费的React.js课程时你想收到通知,可以在此留下电子邮件。设置在开始使用React时,你应该使用最简单的设置:在html文件中使用script标签导入React和ReactDOM库,如下所示:<html><head><

理解React Native的Props和State

Props和State是React Native分别用来控制组件中两种不同类型的数据。Propsprops是Properties的简写,称为属性。props的特点是在组件内它是不可变,或者说不能被修改。在React数据流是单向的,从父组件到子组件的方向传递。props就是组件从父组件接收的数据,在组件内部是不能对它修改。props不可变的特性是有助于我们写可复用的组件。我们只需要对一个组

react-native启动报错:Packager can't listen on port 8000

在mac 启动react-native:react-native start 报端口占用的错误:Packager can't listen on port 8000解决端口占用有两种选择:换一个没有被占用的端口杀掉已占用的端口换端口react-native换端口:react-native start --po

React Apollo入门

入门Apollo Client最简单的方法是使用Apollo Boost,它会给客户端配置推荐的设置。使用Apollo Boost创建app的内容包括缓存,本地状态管理以及错误处理。安装首先安装以下的软件包:npm install apollo-boost react-apollo graphql-tag graphq

禁用react-navigation导航的返回按钮

对于react-navigation >=1.0.0-beta.9可以设置headerLeft为null,这样返回按钮会隐藏。navigationOptions:  {     title: 'MyScreen',     headerLeft: null } 另

React Router 4 表单提交后重定向示例

表单设置fireRedirect为发起从定向的标记,当表单提交后,更新它的值为fireRedirect=true。当fireRedirect为true时,重定向到原来的页面。import React, { Component } from 'react' import { Redirect } from 'react-router' export default class MyForm

在React JSX内部执行循环

这里实现一个表格组件来演示如何在React的JSX内部执行循环。案例假设有一个表格组件,和一个行组件<ObjectRow />,现在需要在表格组件里循环生成行组件<ObjectRow />。是不能直接在jsx里使用for循环,这里介绍两种方法:map函数和立即执行函数。方法一:使用map函数render: function ()&nb

使用Webpack、TypeScript 和React搭建应用

这里简单介绍基于webpack + typescript + react搭建一个应用。初始化项目创建一个空文件夹demo,使用npm在空文件夹初始化项目。npm init npm install --save-dev webpack npm install --save-dev types

使用redux-actions重构redux实现的计数器

在很多Redux入门的文章里经常会用到计数器的示例,这里使用redux-action对redux实现的计数器做下重构,以便了解下redux-action的用法。Redux实现的计数器创建用于增减的两个Action// ACTION const COUNTER_INCREMENT = 'COUNTER_INCREMENT'; const COUNTE

使用ES6编写React应用(ES5转换为ES6)

这里列出React项目从ES5转换为ES6的的变化。1、导入React(require => import)ES5var React = require('react'); var ReactPropTypes = React.PropTypes; ES6import React, {Comp