├── .github
    └── FUNDING.yml
├── LICENSE
├── index.js
├── readme.md
└── zh-cn.md


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
 1 | # These are supported funding model platforms
 2 | 
 3 | github: [Pau1fitz]
 4 | patreon: # Replace with a single Patreon username
 5 | open_collective: # Replace with a single Open Collective username
 6 | ko_fi: # Replace with a single Ko-fi username
 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
12 | polar: # Replace with a single Polar username
13 | buy_me_a_coffee: paulfitz
14 | thanks_dev: # Replace with a single thanks.dev username
15 | custom: # ['link1', 'link2']
16 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Paul Fitzgerald
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | 
 4 | class Example extends Component {
 5 |   render (
 6 |     <section>
 7 |       <p>Hello World!</p>
 8 |     </section>
 9 |   )
10 | }
11 | 
12 | const Example = () => (
13 |   <section>
14 |     <p>Hello World!</p>
15 |   </section>
16 | )
17 | 
18 | ReactDOM.render(
19 |   <Example />,
20 |   document.getElementById('app')
21 | )
22 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
  1 | # React Interview Questions
  2 | 
  3 | Chinese version [here](https://github.com/Pau1fitz/react-interview/blob/master/zh-cn.md).
  4 | 
  5 | Below is a list of common React interview questions. 
  6 | 
  7 | - [How does React work?](#how-does-react-work)
  8 | - [What are the advantages of using React?](#what-are-the-advantages-of-using-react)
  9 | - [What is the difference between a Presentational component and a Container component?](#what-is-the-difference-between-a-presentational-component-and-a-container-component)
 10 | - [What are the differences between a class component and functional component?](#what-are-the-differences-between-a-class-component-and-functional-component)
 11 | - [What is the difference between state and props?](#what-is-the-difference-between-state-and-props)
 12 | - [What are the different lifecycle methods?](#what-are-the-different-lifecycle-methods)
 13 | - [React hooks](#react-hooks)
 14 | - [Where in a React component should you make an AJAX request?](#where-in-a-react-component-should-you-make-an-ajax-request)
 15 | - [What are controlled components?](#what-are-controlled-components)
 16 | - [What are refs used for in React?](#what-are-refs-used-for-in-react)
 17 | - [What is a higher order component?](#what-is-a-higher-order-component)
 18 | - [What advantages are there in using arrow functions?](#what-advantages-are-there-in-using-arrow-functions)
 19 | - [Why is it advised to pass a callback function to setState as opposed to an object?](#why-is-it-advised-to-pass-a-callback-function-to-setState-as-opposed-to-an-object)
 20 | - [What is the alternative of binding `this` in the constructor?](#what-is-the-alternative-of-binding-this-in-the-constructor)
 21 | - [How would you prevent a component from rendering?](#how-would-you-prevent-a-component-from-rendering)
 22 | - [When rendering a list what is a key and what is its purpose?](#when-rendering-a-list-what-is-a-key-and-what-is-its-purpose)
 23 | - [What is the purpose of super(props)?](#what-is-the-purpose-of-superprops)
 24 | - [What is JSX?](#what-is-jsx)
 25 | - [What is equivalent of the following using React.createElement?](#what-is-equivalent-of-the-following-using-React.createElement)
 26 | - [What is `Children`?](#what-is-children)
 27 | - [What is state in react?](#what-is-state-in-react)
 28 | - [Why would you eject from create-react-app?](#why-would-you-eject-from-create-react-app)
 29 | - [What is redux?](#what-is-redux)
 30 | - [What is a store in redux?](#what-is-a-store-in-redux)
 31 | - [What is an action?](#what-is-an-action)
 32 | - [What is a reducer?](#what-is-a-reducer)
 33 | - [What is redux thunk used for?](#what-is-redux-thunk-used-for)
 34 | - [What is a pure function?](#what-is-a-pure-function)
 35 | - [What do you like about React?](#what-do-you-like-about-react)
 36 | - [What don't you like about React?](#what-dont-you-like-about-react)
 37 | - [Example projects](#example-projects)
 38 | 
 39 | 
 40 | #### How does React work?
 41 | React creates a virtual DOM. When state changes in a component it firstly runs a diffing algorithm, which identifies what has changed in the virtual DOM. The second step is reconciliation, where it updates the DOM with the results of diff.
 42 | 
 43 | #### What are the advantages of using React?
 44 | - It is easy to know how a component is rendered, you just need to look at the render function.
 45 | - JSX makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged/combined with each other.
 46 | - You can render React on the server-side. This improves SEO and performance.
 47 | - You can use React with any framework you wish as it is only a view layer.
 48 | - It is easy to test.
 49 | 
 50 | #### What is the difference between a Presentational component and a Container component?
 51 | Presentational components are concerned with how things look. They generally receive data and callbacks exclusively via props. These components rarely have their own state, but when they do it generally concerns UI state, as opposed to data state.
 52 | 
 53 | Container components are more concerned with how things work. These components provide the data and behavior to presentational or other container components. They define actions and provide these as callbacks to the presentational components. They are also often stateful as they serve as data sources. 
 54 | 
 55 | #### What are the differences between a class component and functional component?
 56 | - Class components allows you to use additional features such as local state and lifecycle hooks. Also, to enable your component to have direct access to your store and thus holds state.
 57 | 
 58 | - When your component just receives props and renders them to the page, this is a 'stateless component', for which a pure function can be used. These are also called dumb components or presentational components.
 59 | 
 60 | #### What is the difference between state and props?
 61 | 
 62 | State is a data structure that starts with a default value when a Component mounts. It may be mutated across time, mostly as a result of user events.
 63 | 
 64 | Props (short for properties) are a Component's configuration. They are received from above and immutable as far as the Component receiving them is concerned. A Component cannot change its props, but it is responsible for putting together the props of its child Components. Props do not have to just be data - callback functions may be passed in as props.
 65 | 
 66 | #### What are the different lifecycle methods?
 67 | - `componentWillMount` (deprecated) - this is most commonly used for App configuration in your root component. 
 68 | - `componentDidMount` - here you want to do all the setup you couldn’t do without a DOM, and start getting all the data you need. Also if you want to set up eventListeners etc. this lifecycle hook is a good place to do that.
 69 | - `componentWillReceiveProps` (deprecated)  - this lifecyclye acts on particular prop changes to trigger state transitions.
 70 | - `shouldComponentUpdate` - if you’re worried about wasted renders `shouldComponentUpdate` is a great place to improve performance as it allows you to prevent a rerender if component receives new `prop`. `shouldComponentUpdate` should always return a boolean and based on what this is will determine if the component is rerendered or not.
 71 | - `componentWillUpdate` (deprecated) - rarely used. It can be used instead of `componentWillReceiveProps` on a component that also has `shouldComponentUpdate` (but no access to previous props).
 72 | - `componentDidUpdate` - also commonly used to update the DOM in response to prop or state changes.
 73 | - `componentWillUnmount` - enables you can cancel any outgoing network requests, or remove all event listeners associated with the component.
 74 | 
 75 | #### React Hooks
 76 | Hooks let you use more of React’s features without having to use classes.
 77 | The first hook that you will most likely encounter is `useState`. `useState` is a Hook that lets you add React state to function components. It returns an array with a getter and a setter. The syntax looks like `const [count, setCount] = React.useState(0);`. The equivalent when using a class component would be.
 78 | 
 79 | ```js
 80 | this.state = {
 81 |   count: 0
 82 | };
 83 |     
 84 | <button onClick={() => this.setState({ count: this.state.count + 1 })}>
 85 |   Increase Count
 86 | </button>
 87 | ```
 88 | The next hook you will most likely encounter is `useEffect`. The Effect Hook lets you perform side effects in function components. By passing an empty array as the second argument to `useEffect` is equivalent to using `componentDidMount`. If you pass a value to the array it will only call the `useEffect` function when the value in the array updates.
 89 | 
 90 | ```js
 91 | useEffect(() => {
 92 |   // do stuff when the component mounts
 93 | }, []);
 94 | ```
 95 | 
 96 | #### Where in a React component should you make an AJAX request?
 97 | `componentDidMount` is where an AJAX request should be made in a React component. This method will be executed when the component “mounts” (is added to the DOM) for the first time. This method is only executed once during the component’s life. Importantly, you can’t guarantee the AJAX request will have resolved before the component mounts. If it doesn't, that would mean that you’d be trying to setState on an unmounted component, which would not work. Making your AJAX request in `componentDidMount` will guarantee that there is a component to update.
 98 | 
 99 | #### What are controlled components?
100 | 
101 | In HTML, form elements such as `<input>`, `<textarea>`, and `<select>` typically maintain their own state and update it based on user input. When a user submits a form the values from the aforementioned elements are sent with the form. With React it works differently. The component containing the form will keep track of the value of the input in it's state and will re-render the component each time the callback function e.g. `onChange` is fired as the state will be updated. An input form element whose value is controlled by React in this way is called a "controlled component".
102 | 
103 | #### What are refs used for in React?
104 | 
105 | Refs are used to get reference to a DOM node or an instance of a component in React. Good examples of when to use refs are for managing focus/text selection, triggering imperative animations, or integrating with third-party DOM libraries. You should avoid using string refs and inline ref callbacks. Callback refs are advised by React.
106 | 
107 | #### What is a higher order component?
108 | 
109 | A higher-order component is a function that takes a component and returns a new component. HOC's allow you to reuse code, logic and bootstrap abstraction. The most common is probably Redux’s `connect` function. Beyond simply sharing utility libraries and simple composition, HOCs are the best way to share behavior between React Components. If you find yourself writing a lot of code in different places that does the same thing, you may be able to refactor that code into a reusable HOC.
110 | 
111 | <p>Exercises</p>
112 | 
113 | ----
114 | - Write an HOC that reverses it’s input.
115 | - Write an HOC that supplies data from an API to it’s Passed Component.
116 | - Write an HOC that implements shouldComponentUpdate to avoid reconciliation.
117 | - Write an HOC that uses React.Children.toArray to sort the children passed to it's Passed Component.
118 | 
119 | 
120 | #### What advantages are there in using arrow functions?
121 | * Scope safety: Until arrow functions, every new function defined its own this value (a new object in the case of a constructor, undefined in strict mode function calls, the base object if the function is called as an "object method", etc.). An arrow function does not create its own this, the this value of the enclosing execution context is used. 
122 | * Compactness: Arrow functions are easier to read and write.
123 | * Clarity: When almost everything is an arrow function, any regular function immediately sticks out for defining the scope. A developer can always look up the next-higher function statement to see what the Object is.
124 | 
125 | #### Why is it advised to pass a callback function to setState as opposed to an object?
126 | Because `this.props` and `this.state` may be updated asynchronously, you should not rely on their values for calculating the next state.
127 | 
128 | #### What is the alternative of binding `this` in the constructor?
129 | You can use property initializers to correctly bind callbacks. This is enabled by default in create react app.
130 | you can use an arrow function in the callback. The problem here is that a new callback is created each time the component renders.
131 | 
132 | #### How would you prevent a component from rendering?
133 | Returning null from a component's render method means nothing will be displayed, but it does not affect the firing of the component's lifecycle methods. 
134 | 
135 | If the amount of times the component re-renders is an issue, there are two options available. Manually implementing a check in the `shouldComponentUpdate` lifecycle method hook. 
136 | 
137 | ```
138 | shouldComponentUpdate(nextProps, nextState){
139 |   // Do some check here
140 |   return resultOFCheckAsBoolean
141 | }
142 | ```
143 | 
144 | Or using React.PureComponent instead of React.Component
145 | React.PureComponent implements `shouldComponentUpdate()` with a shallow prop and state comparison. This enables you to avoid re-rendering the component with the same props and state.
146 | 
147 | #### When rendering a list what is a key and what is it's purpose?
148 | Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity. The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys. When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort. It is not recommend to use indexes for keys if the items can reorder, as that would be slow. 
149 | 
150 | #### What is the purpose of super(props)?
151 | 
152 | A child class constructor cannot make use of `this` until `super()` has been called. Also, ES2015 class constructors have to call `super()` if they are subclasses. The reason for passing `props` to `super()` is to enable you to access `this.props` in the constructor.
153 | 
154 | #### What is JSX?
155 | 
156 | JSX is a syntax extension to JavaScript and comes with the full power of JavaScript. JSX produces React "elements". You can embed any JavaScript expression in JSX by wrapping it in curly braces. After compilation, JSX expressions become regular JavaScript objects. This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions:
157 | 
158 | #### What is equivalent of the following using React.createElement?
159 | 
160 | Question:
161 | 
162 | ```
163 | const element = (
164 |   <h1 className="greeting">
165 |     Hello, world!
166 |   </h1>
167 | );
168 | ```
169 | 
170 | Answer:
171 | 
172 | ```
173 | const element = React.createElement(
174 |   'h1',
175 |   {className: 'greeting'},
176 |   'Hello, world!'
177 | );
178 | ```
179 | 
180 | #### What is `Children`?
181 | In JSX expressions that contain both an opening tag and a closing tag, the content between those tags is passed to components automatically as a special prop: `props.children`.
182 | 
183 | There are a number of methods available in the React API to work with this `prop`. These include `React.Children.map`, `React.Children.forEach`, `React.Children.count`, `React.Children.only`, `React.Children.toArray`.
184 | 
185 | #### What is state in react?
186 | State is similar to props, but it is private and fully controlled by the component. State is essentially an object that holds data and determines how the component renders and behaves.
187 | 
188 | #### Why would you eject from create-react-app?
189 | Until you eject you are unable to configure webpack or babel presets.
190 | 
191 | #### What is redux?
192 | The basic idea of redux is that the entire application state is kept in a single store. The store is simply a javascript object. The only way to change the state is by sending actions from your application and then writing reducers for these actions that modify the state. The entire state transition is kept inside reducers and should not have any side-effects.
193 | 
194 | #### What is a store in redux?
195 | 
196 | The store is a javascript object that holds application state. Along with this it also has the following responsibilities:
197 | - Allows access to state via `getState()`;
198 | - Allows state to be updated via `dispatch(action)`;
199 | - Registers listeners via `subscribe(listener)`;
200 | - Handles unregistering of listeners via the function returned by `subscribe(listener)`.
201 | 
202 | #### What is an action?
203 | Actions are plain javascript objects. They must have a type indicating the type of action being performed. In essence, actions are payloads of information that send data from your application to your store. 
204 | 
205 | #### What is a reducer?
206 | 
207 | A reducer is simply a pure function that takes the previous state and an action, and returns the next state.
208 | 
209 | #### What is Redux Thunk used for?
210 | 
211 | Redux thunk is middleware that allows you to write action creators that return a function instead of an action. The thunk can then be used to delay the dispatch of an action if a certain condition is met. This allows you to handle the asynchronous dispatching of actions. 
212 | 
213 | #### What is a pure function?
214 | A pure function is a function that doesn't depend on and doesn't modify the states of variables out of its scope. Essentially, this means that a pure function will always return the same result given same parameters.
215 | 
216 | 
217 | #### What do you like about react?
218 | ..... 
219 | 
220 | #### What don't you like about react?
221 | .....
222 | 
223 | #### Example projects
224 | 
225 | - [React Spotify](https://github.com/Pau1fitz/react-spotify)
226 | - [React Soundcloud](https://github.com/andrewngu/sound-redux)
227 | 
228 | #### Example Tests
229 | 
230 | - [Senior React Dev Test](https://developerjobsboard.co.uk/2018/07/28/an-example-senior-react-redux-developer-task/)
231 | 
232 | 


--------------------------------------------------------------------------------
/zh-cn.md:
--------------------------------------------------------------------------------
  1 | ## React面试问题
  2 | 下面是一个常用的关于 React 的面试问题列表：
  3 | 
  4 | * [React 的工作原理](#react-%E7%9A%84%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86)?
  5 | * [使用 React 有何优点](#%E4%BD%BF%E7%94%A8-react-%E6%9C%89%E4%BD%95%E4%BC%98%E7%82%B9)？
  6 | * [展示组件(Presentational component)和容器组件(Container component)之间有何不同](#%E5%B1%95%E7%A4%BA%E7%BB%84%E4%BB%B6presentational-component%E5%92%8C%E5%AE%B9%E5%99%A8%E7%BB%84%E4%BB%B6container-component%E4%B9%8B%E9%97%B4%E6%9C%89%E4%BD%95%E4%B8%8D%E5%90%8C)？
  7 | * [类组件(Class component)和函数式组件(Functional component)之间有何不同](#%E7%B1%BB%E7%BB%84%E4%BB%B6class-component%E5%92%8C%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6functional-component%E4%B9%8B%E9%97%B4%E6%9C%89%E4%BD%95%E4%B8%8D%E5%90%8C)？
  8 | * [(组件的)状态(state)和属性(props)之间有何不同](#%E7%BB%84%E4%BB%B6%E7%9A%84%E7%8A%B6%E6%80%81state%E5%92%8C%E5%B1%9E%E6%80%A7props%E4%B9%8B%E9%97%B4%E6%9C%89%E4%BD%95%E4%B8%8D%E5%90%8C)？
  9 | * [指出(组件)生命周期方法的不同](#%E6%8C%87%E5%87%BA%E7%BB%84%E4%BB%B6%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E6%96%B9%E6%B3%95%E7%9A%84%E4%B8%8D%E5%90%8C)？
 10 | * [应该在 React 组件的何处发起 Ajax 请求](#%E5%BA%94%E8%AF%A5%E5%9C%A8-react-%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%95%E5%A4%84%E5%8F%91%E8%B5%B7-ajax-%E8%AF%B7%E6%B1%82)？
 11 | * [何为受控组件(controlled component)](#%E4%BD%95%E4%B8%BA%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6controlled-component)？
 12 | * [在 React 中，refs 的作用是什么](#%E5%9C%A8-react-%E4%B8%ADrefs-%E7%9A%84%E4%BD%9C%E7%94%A8%E6%98%AF%E4%BB%80%E4%B9%88)？
 13 | * [何为高阶组件(higher order component)](#%E4%BD%95%E4%B8%BA%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6higher-order-component)？
 14 | * [使用箭头函数(arrow functions)的优点是什么](#%E4%BD%BF%E7%94%A8%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0arrow-functions%E7%9A%84%E4%BC%98%E7%82%B9%E6%98%AF%E4%BB%80%E4%B9%88)？
 15 | * [为什么建议传递给 setState 的参数是一个 callback 而不是一个对象](#%E4%B8%BA%E4%BB%80%E4%B9%88%E5%BB%BA%E8%AE%AE%E4%BC%A0%E9%80%92%E7%BB%99-setstate-%E7%9A%84%E5%8F%82%E6%95%B0%E6%98%AF%E4%B8%80%E4%B8%AA-callback-%E8%80%8C%E4%B8%8D%E6%98%AF%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1)？
 16 | * [除了在构造函数中绑定 `this`，还有其它方式吗](#%E9%99%A4%E4%BA%86%E5%9C%A8%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E4%B8%AD%E7%BB%91%E5%AE%9A-this%E8%BF%98%E6%9C%89%E5%85%B6%E5%AE%83%E6%96%B9%E5%BC%8F%E5%90%97)？
 17 | * [怎么阻止组件的渲染](#%E6%80%8E%E4%B9%88%E9%98%BB%E6%AD%A2%E7%BB%84%E4%BB%B6%E7%9A%84%E6%B8%B2%E6%9F%93)？
 18 | * [当渲染一个列表时，何为 key？设置 key 的目的是什么](#%E5%BD%93%E6%B8%B2%E6%9F%93%E4%B8%80%E4%B8%AA%E5%88%97%E8%A1%A8%E6%97%B6%E4%BD%95%E4%B8%BA-key%E8%AE%BE%E7%BD%AE-key-%E7%9A%84%E7%9B%AE%E7%9A%84%E6%98%AF%E4%BB%80%E4%B9%88)？
 19 | * [(在构造函数中)调用 super(props) 的目的是什么](#%E5%9C%A8%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E4%B8%AD%E8%B0%83%E7%94%A8-superprops-%E7%9A%84%E7%9B%AE%E7%9A%84%E6%98%AF%E4%BB%80%E4%B9%88)？
 20 | * [何为 JSX](#%E4%BD%95%E4%B8%BA-jsx)？
 21 | * [怎么用 React.createElement 重写下面的代码](#%E6%80%8E%E4%B9%88%E7%94%A8%20React.createElement%20%E9%87%8D%E5%86%99%E4%B8%8B%E9%9D%A2%E7%9A%84%E4%BB%A3%E7%A0%81)？
 22 | * [何为 `Children`](#%E4%BD%95%E4%B8%BA-children)？
 23 | * [在 React 中，何为 state](#%E5%9C%A8-react-%E4%B8%AD%E4%BD%95%E4%B8%BA-state)？
 24 | * [你为何排斥 create-react-app](#%E4%BD%A0%E4%B8%BA%E4%BD%95%E6%8E%92%E6%96%A5-create-react-app)？
 25 | * [何为 redux](#%E4%BD%95%E4%B8%BA-redux)？
 26 | * [在 Redux 中，何为 store](#%E5%9C%A8-redux-%E4%B8%AD%E4%BD%95%E4%B8%BA-store)？
 27 | * [何为 action](#%E4%BD%95%E4%B8%BA-action)？
 28 | * [何为 reducer](#%E4%BD%95%E4%B8%BA-reducer)？
 29 | * [Redux Thunk 的作用是什么](#redux-thunk-%E7%9A%84%E4%BD%9C%E7%94%A8%E6%98%AF%E4%BB%80%E4%B9%88)？
 30 | * [何为纯函数(pure function)](#%E4%BD%95%E4%B8%BA%E7%BA%AF%E5%87%BD%E6%95%B0pure-function)？
 31 | * [你喜欢 React 的哪些方面](#%E4%BD%A0%E5%96%9C%E6%AC%A2-react-%E7%9A%84%E5%93%AA%E4%BA%9B%E6%96%B9%E9%9D%A2)？
 32 | * [你不喜欢 React 的哪些方面](#%E4%BD%A0%E4%B8%8D%E5%96%9C%E6%AC%A2-react-%E7%9A%84%E5%93%AA%E4%BA%9B%E6%96%B9%E9%9D%A2)？
 33 | * [示例项目](#%E7%A4%BA%E4%BE%8B%E9%A1%B9%E7%9B%AE)
 34 | 
 35 | #### React 的工作原理
 36 | React 会创建一个虚拟 DOM(virtual DOM)。当一个组件中的状态改变时，React 首先会通过 "diffing" 算法来标记虚拟 DOM 中的改变，第二步是调节(reconciliation)，会用 diff 的结果来更新 DOM。
 37 | 
 38 | #### 使用 React 有何优点
 39 | * 只需查看 `render` 函数就会很容易知道一个组件是如何被渲染的
 40 | * JSX 的引入，使得组件的代码更加可读，也更容易看懂组件的布局，或者组件之间是如何互相引用的
 41 | * 支持服务端渲染，这可以改进 SEO 和性能
 42 | * 易于测试
 43 | * React 只关注 View 层，所以可以和其它任何框架(如Backbone.js, Angular.js)一起使用
 44 | 
 45 | #### 展示组件(Presentational component)和容器组件(Container component)之间有何不同
 46 | 展示组件关心组件看起来是什么。展示专门通过 props 接受数据和回调，并且几乎不会有自身的状态，但当展示组件拥有自身的状态时，通常也只关心 UI 状态而不是数据的状态。
 47 | 
 48 | 容器组件则更关心组件是如何运作的。容器组件会为展示组件或者其它容器组件提供数据和行为(behavior)，它们会调用 `Flux actions`，并将其作为回调提供给展示组件。容器组件经常是有状态的，因为它们是(其它组件的)数据源。
 49 | 
 50 | #### 类组件(Class component)和函数式组件(Functional component)之间有何不同
 51 | * 类组件不仅允许你使用更多额外的功能，如组件自身的状态和生命周期钩子，也能使组件直接访问 `store` 并维持状态
 52 | * 当组件仅是接收 `props`，并将组件自身渲染到页面时，该组件就是一个 '无状态组件(stateless component)'，可以使用一个纯函数来创建这样的组件。这种组件也被称为哑组件(dumb components)或展示组件
 53 | 
 54 | #### (组件的)状态(state)和属性(props)之间有何不同
 55 | `State` 是一种数据结构，用于组件挂载时所需数据的默认值。`State` 可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果。
 56 | 
 57 | `Props`(properties 的简写)则是组件的配置。`props` 由父组件传递给子组件，并且就子组件而言，`props` 是不可变的(immutable)。组件不能改变自身的 props，但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据--回调函数也可以通过 props 传递。
 58 | 
 59 | #### 指出(组件)生命周期方法的不同
 60 | * `componentWillMount` -- 多用于根组件中的应用程序配置
 61 | * `componentDidMount` -- 在这可以完成所有没有 DOM 就不能做的所有配置，并开始获取所有你需要的数据；如果需要设置事件监听，也可以在这完成
 62 | * `componentWillReceiveProps` -- 这个周期函数作用于特定的 prop 改变导致的 state 转换
 63 | * `shouldComponentUpdate` -- 如果你担心组件过度渲染，`shouldComponentUpdate` 是一个改善性能的地方，因为如果组件接收了新的 `prop`， 它可以阻止(组件)重新渲染。shouldComponentUpdate 应该返回一个布尔值来决定组件是否要重新渲染
 64 | * `componentWillUpdate` -- 很少使用。它可以用于代替组件的 `componentWillReceiveProps` 和 `shouldComponentUpdate`(但不能访问之前的 props)
 65 | * `componentDidUpdate` -- 常用于更新 DOM，响应 prop 或 state 的改变
 66 | * `componentWillUnmount` -- 在这你可以取消网络请求，或者移除所有与组件相关的事件监听器
 67 | 
 68 | #### 应该在 React 组件的何处发起 Ajax 请求
 69 | 在 React 组件中，应该在 `componentDidMount` 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行，在组件的生命周期中仅会执行一次。更重要的是，你不能保证在组件挂载之前 Ajax 请求已经完成，如果是这样，也就意味着你将尝试在一个未挂载的组件上调用 setState，这将不起作用。在 `componentDidMount` 中发起网络请求将保证这有一个组件可以更新了。
 70 | 
 71 | #### 何为受控组件(controlled component)
 72 | 在 HTML 中，类似 `<input>`, `<textarea>` 和 `<select>` 这样的表单元素会维护自身的状态，并基于用户的输入来更新。当用户提交表单时，前面提到的元素的值将随表单一起被发送。但在 React 中会有些不同，包含表单元素的组件将会在 state 中追踪输入的值，并且每次调用回调函数时，如 `onChange` 会更新 state，重新渲染组件。一个输入表单元素，它的值通过 React 的这种方式来控制，这样的元素就被称为"受控元素"。
 73 | 
 74 | #### 在 React 中，refs 的作用是什么
 75 | Refs 可以用于获取一个 DOM 节点或者 React 组件的引用。何时使用 refs 的好的示例有管理焦点/文本选择，触发命令动画，或者和第三方 DOM 库集成。你应该避免使用 String 类型的 Refs 和内联的 ref 回调。Refs 回调是 React 所推荐的。
 76 | 
 77 | #### 何为高阶组件(higher order component)
 78 | 高阶组件是一个以组件为参数并返回一个新组件的函数。HOC 运行你重用代码、逻辑和引导抽象。最常见的可能是 Redux 的 `connect` 函数。除了简单分享工具库和简单的组合，HOC最好的方式是共享 React 组件之间的行为。如果你发现你在不同的地方写了大量代码来做同一件事时，就应该考虑将代码重构为可重用的 HOC。
 79 | 
 80 | 练习
 81 | 
 82 | <hr />
 83 | 
 84 | * 写一个反转其输入的 HOC
 85 | * 写一个从 API 提供数据给传入的组件的 HOC
 86 | * 写一个实现 shouldComponentUpdate 来避免 reconciliation 的 HOC
 87 | * 写一个通过 `React.Children.toArray` 对传入组件的子组件进行排序的 HOC
 88 | 
 89 | #### 使用箭头函数(arrow functions)的优点是什么
 90 | * 作用域安全：在箭头函数之前，每一个新创建的函数都有定义自身的 `this` 值(在构造函数中是新对象；在严格模式下，函数调用中的 `this` 是未定义的；如果函数被称为“对象方法”，则为基础对象等)，但箭头函数不会，它会使用封闭执行上下文的 `this` 值。
 91 | * 简单：箭头函数易于阅读和书写
 92 | * 清晰：当一切都是一个箭头函数，任何常规函数都可以立即用于定义作用域。开发者总是可以查找 next-higher 函数语句，以查看 `this` 的值
 93 | 
 94 | #### 为什么建议传递给 setState 的参数是一个 callback 而不是一个对象
 95 | 因为 `this.props` 和 `this.state` 的更新可能是异步的，不能依赖它们的值去计算下一个 state。
 96 | 
 97 | #### 除了在构造函数中绑定 `this`，还有其它方式吗
 98 | 你可以使用属性初始值设定项(property initializers)来正确绑定回调，create-react-app 也是默认支持的。在回调中你可以使用箭头函数，但问题是每次组件渲染时都会创建一个新的回调。
 99 | 
100 | #### 怎么阻止组件的渲染
101 | 在组件的 `render` 方法中返回 `null` 并不会影响触发组件的生命周期方法
102 | 
103 | #### 当渲染一个列表时，何为 key？设置 key 的目的是什么
104 | Keys 会有助于 React 识别哪些 `items` 改变了，被添加了或者被移除了。Keys 应该被赋予数组内的元素以赋予(DOM)元素一个稳定的标识，选择一个 key 的最佳方法是使用一个字符串，该字符串能惟一地标识一个列表项。很多时候你会使用数据中的 IDs 作为 keys，当你没有稳定的 IDs 用于被渲染的 `items` 时，可以使用项目索引作为渲染项的 key，但这种方式并不推荐，如果 `items` 可以重新排序，就会导致 `re-render` 变慢。
105 | 
106 | #### (在构造函数中)调用 super(props) 的目的是什么
107 | 在 `super()` 被调用之前，子类是不能使用 `this` 的，在 ES2015 中，子类必须在 `constructor` 中调用 `super()`。传递 `props` 给 `super()` 的原因则是便于(在子类中)能在 `constructor` 访问 `this.props`。
108 | 
109 | #### 何为 JSX
110 | JSX 是 JavaScript 语法的一种语法扩展，并拥有 JavaScript 的全部功能。JSX 生产 React "元素"，你可以将任何的 JavaScript 表达式封装在花括号里，然后将其嵌入到 JSX 中。在编译完成之后，JSX 表达式就变成了常规的 JavaScript 对象，这意味着你可以在 `if` 语句和 `for` 循环内部使用 JSX，将它赋值给变量，接受它作为参数，并从函数中返回它。
111 | 
112 | #### 怎么用 React.createElement 重写下面的代码
113 | 
114 | Question：
115 | 
116 | ```js
117 | const element = (
118 |   <h1 className="greeting">
119 |     Hello, world!
120 |   </h1>
121 | );
122 | ```
123 | 
124 | Answer：
125 | 
126 | ```js
127 | const element = React.createElement(
128 |   'h1',
129 |   {className: 'greeting'},
130 |   'Hello, world!'
131 | );
132 | ```
133 | 
134 | #### 何为 `Children`
135 | 在JSX表达式中，一个开始标签(比如`<a>`)和一个关闭标签(比如`</a>`)之间的内容会作为一个特殊的属性`props.children`被自动传递给包含着它的组件。
136 | 
137 | 这个属性有许多可用的方法，包括 `React.Children.map`，`React.Children.forEach`， `React.Children.count`， `React.Children.only`，`React.Children.toArray`。
138 | 
139 | #### 在 React 中，何为 state
140 | State 和 props 类似，但它是私有的，并且完全由组件自身控制。State 本质上是一个持有数据，并决定组件如何渲染的对象。
141 | 
142 | #### 什么原因会促使你脱离 create-react-app 的依赖
143 | 当你想去配置 webpack 或 babel presets。
144 | 
145 | #### 何为 redux
146 | Redux 的基本思想是整个应用的 state 保持在一个单一的 store 中。store 就是一个简单的 javascript 对象，而改变应用 state 的唯一方式是在应用中触发 actions，然后为这些 actions 编写 reducers 来修改 state。整个 state 转化是在 reducers 中完成，并且不应该有任何副作用。
147 | 
148 | #### 在 Redux 中，何为 store
149 | Store 是一个 javascript 对象，它保存了整个应用的 state。与此同时，Store 也承担以下职责：
150 | 
151 | * 允许通过 `getState()` 访问 state
152 | * 运行通过 `dispatch(action)` 改变 state
153 | * 通过 `subscribe(listener)` 注册 listeners
154 | * 通过 `subscribe(listener)` 返回的函数处理 listeners 的注销
155 | 
156 | #### 何为 action
157 | Actions 是一个纯 javascript 对象，它们必须有一个 type 属性表明正在执行的 action 的类型。实质上，action 是将数据从应用程序发送到 store 的有效载荷。
158 | 
159 | #### 何为 reducer
160 | 一个 reducer 是一个纯函数，该函数以先前的 state 和一个 action 作为参数，并返回下一个 state。
161 | 
162 | #### Redux Thunk 的作用是什么
163 | Redux thunk 是一个允许你编写返回一个函数而不是一个 action 的 actions creators 的中间件。如果满足某个条件，thunk 则可以用来延迟 action 的派发(dispatch)，这可以处理异步 action 的派发(dispatch)。
164 | 
165 | #### 何为纯函数(pure function)
166 | 一个纯函数是一个不依赖于且不改变其作用域之外的变量状态的函数，这也意味着一个纯函数对于同样的参数总是返回同样的结果。
167 | 
168 | #### 你喜欢 React 的哪些方面
169 | ...
170 | 
171 | #### 你不喜欢 React 的哪些方面
172 | ...
173 | 
174 | #### 示例项目
175 | * [React Spotify](https://github.com/Pau1fitz/react-spotify)
176 | * [React Soundcloud](https://github.com/andrewngu/sound-redux)
177 | 
178 | #### 示例测试
179 | * [Senior React Dev Test](https://developerjobsboard.co.uk/2018/07/28/an-example-senior-react-redux-developer-task/)
180 | 


--------------------------------------------------------------------------------