/react-faq

收集 React.js 常见问题的链接(中文版)

React FAQ

本指南的目的是把关于 React 核心概念的优质内容集中起来，以便快速参考。

请保持学习的心态。 阅读，尝试，乱搞（没关系）。

加群交流

React技术交流群

其它语言

目录

入门

零基础，之前没有听说过 React?

历史

创建 React 项目

怎么创建一个新的 React 项目?

Where can I find videos for using React Create App?

React Create App + Express @sprjrx @ladyleet

Can I play around with React Online?

为什么使用 React?

  • Composable components
  • Easy to use with existing projects
  • Declarative
  • Functional / Immutable friendly

Is it fast?

What so good about React?

JSX

JSX 是什么?

JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant. - http://buildwithreact.com

What does JSX really do for me?

This is the sort of stuff JSX saves you from having to manage Jonny Buchanan ‏@jbscript

虚拟 DOM

The Virtual DOM provides a lightweight implementation of the DOM and events system. Instead of dealing with the browser, you manipulate an in-memory version of the DOM.

What is the Virtual DOM?

Is the Virtual DOM all about speed?

No

See :

https://twitter.com/dan_abramov/status/790326092582252544 https://twitter.com/acdlite/status/779693791607336960

I wonder if we can reclaim the VDOM term to mean "Value DOM", as in Value Type, instead of "Virtual DOM"...? More accurate. @sebmarkbage

> It doesn't improve perf over hand written DOM code but it's hard to write on scale. React scales well. **@dan_abramov**
> React ultimately has to call browser APIs at some point, it can't possibly be faster than writing the same exact calls by hand **@dan_abramov**
>React will not do anything that you cannot. By definition everything it does can be reproduced (and some people have with other libraries/frameworks that follow similar conventions). The point is not that React does something that you can't, but rather that by introducing React to your application you are relieved of having to worry about manually handling your DOM, manually determining how to update it efficiently, minimizing traversals, etc. - [Sean Grogg](https://www.quora.com/Is-ReactJS-faster-than-direct-DOM-manipulation-with-JavaScript-or-jQuery)

Key Takeaway:

React keeps your product reasonably fast without you having to think about it all the time, or to jump through the hoops @dan_abramov

React 元素

Elements are the smallest building blocks of React apps. Elements are what components are "made of ..." — React Docs

组件

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions. - React Docs

What are some of your best practices when working with components?

  • Keep it (F)ocused.
  • Keep it (I)ndependent.
  • Keep it (R)eusable.
  • Keep it (S)mall.
  • Keep it (T)estable.
  • or in short, FIRST.

— Addy Osmani https://addyosmani.com/first

See : https://twitter.com/mxstbr/status/790084862954864640 Max Stoiber @mxstbr

方法生命周期

Components have several "lifecycle methods" that allow you to override / run code at particular times.

What are Lifecycle Methods?

组件类型

There are two main types of components Functional and Class Components

// Functional Component
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Class Component

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Components can be used (composed) in many ways see the following links for patterns and thoughts on creating Components.

How do I decide what type of Component to use?

This comes down to a few factors... a primary one being you need to decide what a component should do.
See: Some Thoughts on Function Components in React from A. Sharif @sharifsbeat for some help deciding.

Also:

Stateless Function <Code />

Presentational and Container Components <Code />

Higher-Order Components <Code />

Function as Child Components <Code />

What types of components are there?

查找组件

Where are some good places to find components?

属性

What are props?

props (short for properties) are a Component's configuration, its options if you may. They are received from above and immutable as far as the Component receiving them is concerned. - react-guide

See : props vs state

How do I pass props?

How do I pass boolean values?

Should I use import, props, or context in React?

属性类型

PropTypes are essentially a dictionary where you define what props your component needs and what type(s) they should be. - Niels Gerritsen

What are PropTypes?

Why are React PropTypes important?

How do I validate props?

状态

In one sense, “state” means the current visual representation of the app on screen... In the React sense, “state” is an object that represents the parts of the app that can change. Each component can maintain its own state, which lives in an object called this.state. - Dave Ceddia

What is state in React?

How do I handle state?

How can I decouple state and UI?

Children API

绑定

The JavaScript bind method has several uses. Typically, it is used to preserve execution context for a function that executes in another context.

What should you use for binding methods in React classes?

What is this bind thing?

事件

How does the event system work in React?

渲染/呈现

What should go in the render function?

Keys

React uses keys to help with Reconciliation (i.e. how it calculates the DOM diff for each render).

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

Why can't i put key in default props (or define the default somewhere else)?

What should I use for a key?

What are some examples where I should manually change a key?

Refs

The ref attribute makes it possible to store a reference to a particular React element or component returned by the component render() configuration function. This can be valuable when you need a reference, from within a component, to some element or component contained within the render() function. - reactenlightenment.com

What are refs and are string refs are bad?

Context

⚠️ Context is an advanced and experimental feature. The API is likely to change in future releases. The rumours of its existence are true but be careful!

表单

How can I build forms with React?

How can I validate form input?

控制组件

What is a controlled component?

Via Loren Stewart @lorenstewart111 React.js Forms: Controlled Components

A controlled component has two aspects:

  1. Controlled components have functions to govern the data going into them on every onChange event, rather than grabbing the data only once, e.g. when a user clicks a submit button. This 'governed' data is then saved to state (in this case, the parent/container component's state).

  2. Data displayed by a controlled component is received through props passed down from it's parent/container component.

This is a one-way loop – from (1) child component input (2) to parent component state and (3) back down to the child component via props – is what is meant by unidirectional data flow in React.js application architecture.

#React Ajax

What is the best practice for getting server data into React components?

It depends! See: React AJAX Best Practices Andrew H Farmer @ahfarmer

模式

Gotchas

What are some React Gotchas?

PATENTS

What's all this stuff I hear about Facebook PATENTS clause?

Mixins

Why are Mixins Considered Harmful?

国际化

How should I handle internationalization?

What repos should I checkout for internationalization?

第三方库

How do I use third party libraries?

性能

How can I make my app faster?

动画

How do I animate things in React?

Is there declarative api for animations?

How can I animate Page Transitions?

What are some good repos to checkout for animation in React?

SVG & React

How do I work with SVG's in React?

React Style Guides

Where can I find some good React style guides?

Redux 和 Mobx

What's (Redux/Mobx)?

Do I need to use (Redux/Mobx)?

将 React 添加到现有 APP 中

How do I start adding React to an existing app?

CSS 和 React

What about styling things in React?

You can use plain CSS or any preprocessor (Sass, Less etc...) with React. React outputs standard markup so technically you can keep doing what you've been doing.

Using CSS to style our React content is actually as straightforward as you can imagine it to be. Because React ends up spitting out regular HTML tags, all of the various CSS tricks you've learned over the years to style HTML still apply. - kirupa

What about using Bootstrap with React?

Component Level Styling

There are various approaches for React that allow us to push styling to the component level. - survivejs.com

What repos should I checkout for styling at the component level?

Note: Also see - Styled components or Glamor?

What's the difference between what’s called "inline styles" and what's called “CSS-in-JS”?

I just need some simple inline styles ... What's the most basic way to use inline styles with React?

What resources are available discussing the pros and cons of inline styles and CSS in JS?

What about using CSS Modules for styling?

There's too many CSS in JS options how can I compare them?

How can I style/build a component that's very reusable customizable?

测试

讨论/会议视频

为 React JS 贡献代码

Where can I learn about Contributing to React JS?

核心注释

Where can I find out what's going on with React / Upcoming versions?

通用的 React

Deep Dive

React Fiber

What is React Fiber?

Is Fiber ready yet?

How can I contribute to Fiber?

视频课程

What are some good video resources/courses to learn React?

#A11Y

What about accessibility?

How do I handle A11y in React

讨论

练习

Where can I get React training?

Micheal Jackson @mjackson & Ryan Florence @ryanflorence

*Brian Holt* @holtbt

书籍

Where can I find some good books about React?

Newsletters

Where can I find React specific newsletters?

Interview Questions

工具