Functional and Class Components

Functional and Class Components

  The simplest way to define a component is to write a JavaScript function:

  

  This function is a valid React component because it accepts a single "props" object argument with data and returns a React element. We call such components "functional" because they are literally JavaScript functions.

  You can also use an ES6 class to define a component:

  

  

  The above two components are equivalent from React‘s point of view.

参考:https://facebook.github.io/react/docs/components-and-props.html#functional-and-class-components

时间: 2024-11-13 10:03:38

Functional and Class Components的相关文章

Building Maintainable Software-java篇之Keep Architecture Components Balanced

Building encapsulation boundaries is a crucial skill in software architecture. -George H. Fairbanks in Just Enough Architecture Guideline: ? Balance the number and relative size of top-level components in your code. ? Do this by organizing source cod

[React] Recompose: Theme React Components Live with Context

SASS Bootstrap allows us to configure theme or branding variables that affect all components (e.g. Primary Color or Link Color). When we isolate our styles inside React components we lose the ability to theme them. To get round this we can put our th

Brocade300 commands

aaaconfig                  Configure RADIUS for AAA servicesad                         Specifies all administration domain (AD)-level                           operationsag                         Configure the Access Gateway featureagshow           

React技术栈系列—基础02---组件和生命周期

组件 坦白地说,学习一门技术或者某个框架,最好的资源是其官方文档,只是咱英文不好,看不懂呀,但也的看看呀. Waht is Component? Components let you split the UI into independent, reusable pieces, and think about eachpiece in isolation. 组件让你可以拆分UI为独立.可以被复用的单元,每个单元是独立的. Conceptually, components are like Jav

Method and apparatus for verification of coherence for shared cache components in a system verification environment

A method and apparatus for verification of coherence for shared cache components in a system verification environment are provided. With the method and apparatus, stores to the cache are applied to a cache functional simulator in the order that they

[React] Creating a Stateless Functional Component

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

[Redux] Extracting Presentational Components -- Footer, FilterLink

Code to be refactored: let nextTodoId = 0; class TodoApp extends Component { render() { const { todos, visibilityFilter } = this.props; const visibleTodos = getVisibleTodos( todos, visibilityFilter ); return ( <div> <input ref={node => { this.

[Redux] Extracting Presentational Components -- AddTodo

The code to be refactored: let nextTodoId = 0; class TodoApp extends Component { render() { const { todos, visibilityFilter } = this.props; const visibleTodos = getVisibleTodos( todos, visibilityFilter ); return ( <div> <input ref={node => { t

[Recompose] Add Local State to a Functional Stateless Component using Recompose

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