We can use 'displayName' on component to change its component tag in dev tool: import React from 'react'; import {FooterLink} from '../containers' export const Footer = () => ( <p> Show: {' '} <FooterLink filter="all">All</Foot…

Most of the components that you write will be stateless, meaning that they take in props and return what you want to be displayed. In React 0.14, a simpler syntax for writing these kinds of components was introduced, and we began calling these compon…

React.createClass和extends Component的区别主要在于: 语法区别 propType 和 getDefaultProps 状态的区别 this区别 Mixins 语法区别 React.createClass import React from 'react'; const Contacts = React.createClass({ render() { return ( <div></div> ); } }); export default Cont…

React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图 getDefaultProps object getDefaultProps() 执行过一次后,被创建的类会有缓存,映射的值会存在this.props,前提是这个prop不是父组件指定的 这个方法在对象被创建之前执行,因此不能在方法内调用this.props ,另外,注意任何getDefaultProps()返回的对象在实例中共享,不…

Learn how to use the 'withState' and 'withHandlers' higher order components to easily add local state to—and create a reusable local state pattern for—your functional stateless components. No need for classes! withState: const Statue = withState('sho…

一.它们几乎完全相同,但是PureComponent通过prop和state的浅比较来实现shouldComponentUpdate,某些情况下可以用PureComponent提升性能 1.所谓浅比较(shallowEqual),即react源码中的一个函数,然后根据下面的方法进行是不是PureComponent的判断,帮我们做了本来应该我们在shouldComponentUpdate中做的事情 if (this._compositeType === CompositeTypes.PureCla…

For example we have the following code: const TodoList = (props) => ( <div className="Todo-List"> <ul> {props.todos.map(todo => <TodoItem key={todo.id} {...todo} />)} </ul> </div> ) Because we wrote as functio…

To show a list of unchanging data in React Native you can use the scroll view component. In this lesson, we'll map through the data we got back from the Github API, and fill complete ScrollView component for the user profile. After call goToProfile f…

Here we refactor a React TypeScript class component to a function component with a useState hook and discuss how props and state types can be modeled accordingly. import * as React from "react"; import { render } from "react-dom"; impo…

We have a render prop based class component that allows us to make a GraphQL request with a given query string and variables and uses a GitHub graphql client that is in React context to make the request. Let's refactor this to a function component th…