(Collection) Introduction to common interview questions in React

This article brings you an introduction to (collection of) commonly used interview questions in React. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The following is a list of commonly used interview questions about React:

Whether you are an interviewer or a recruiter, you can refer to the following questions

Be sure to bookmark

How React works

React will create a virtual DOM (virtual DOM). When the state in a component changes, React will first mark the changes in the virtual DOM through the "diffing" algorithm. The second step is reconciliation, and the DOM will be updated with the results of the diff.

What are the advantages of using React

You can easily know how a component is rendered by just looking at the render function

The introduction of JSX makes the component The code is more readable, and it is easier to understand the layout of components, or how components refer to each other

Supports server-side rendering, which can improve SEO and performance

Easy to test

React only focuses on the View layer, so it can be used with any other framework (such as Backbone.js, Angular.js)

Presentational component and Container component What's the difference between

Presentation components care about what the component looks like. Display specifically accepts data and callbacks through props, and almost never has its own state, but when the display component has its own state, it usually only cares about the UI state rather than the state of the data.

Container components are more concerned about how the components operate. Container components will provide data and behavior (behavior) to the display component or other container components. They will call Flux actions and provide them as callbacks to the display component. Container components are often stateful because they are sources of data (for other components).

What is the difference between Class component and Functional component

Class components not only allow you to use more additional functions, such as the component itself State and life cycle hooks also enable components to directly access the store and maintain state

When a component only receives props and renders the component itself to the page, the component is a 'stateless component' ', such a component can be created using a pure function. Such components are also called dumb components or presentation components

What is the difference between (component's) state and properties (props)

State Is a data structure used for the default value of the data required when the component is mounted. State may mutate over time, but most often as a result of user event behavior.

Props (abbreviation for properties) is the configuration of the component. Props are passed from parent components to child components, and as far as child components are concerned, props are immutable. A component cannot change its own props, but it can put the props of its subcomponents together (unified management). Props aren't just data either - callback functions can be passed via props too.

Point out the difference in (component) life cycle methods

componentWillMount -- mostly used for application configuration in the root component

componentDidMount -- everything can be done here All configurations that cannot be done without DOM and start getting all the data you need; if you need to set up event listening, you can also complete it here

componentWillReceiveProps -- This periodic function acts on the state caused by a specific prop change Transition

shouldComponentUpdate -- If you're worried about over-rendering your component, shouldComponentUpdate is a place to improve performance because it prevents the component from re-rendering if it receives new props. shouldComponentUpdate should return a boolean value to determine whether the component should be re-rendered

componentWillUpdate -- rarely used. It can be used to replace the component's componentWillReceiveProps and shouldComponentUpdate (but cannot access the previous props)

componentDidUpdate -- often used to update the DOM in response to prop or state changes

componentWillUnmount -- here you You can cancel the network request, or remove all event listeners related to the component

Where should the Ajax request be initiated in the React component

In the React component, the network request should be initiated in componentDidMount. This method will be executed when the component is first "mounted" (added to the DOM) and will only be executed once in the component's life cycle. More importantly, you can't guarantee that before the component is mounted The Ajax request has completed. If so, it means you are trying to call setState on an unmounted component, which will not work. Making a network request in componentDidMount will ensure that there is a component ready to update.

What is a controlled component

In HTML, form elements like , and <select> maintain their own state. and updated based on user input. When the user submits the form, the values ​​of the previously mentioned elements will be sent along with the form. But it's a little different in React. The component containing the form element will track the input value in the state, and every time the callback function is called, such as onChange, the state will be updated and the component will be re-rendered. An input form element whose value is controlled by React in this way is called a "controlled element". </p> <h4>In React, what is the role of refs</h4> <p>Refs can be used to obtain a reference to a DOM node or React component. Good examples of when to use refs are to manage focus/text selection, trigger command animations, or integrate with third-party DOM libraries. You should avoid using String Refs and inline ref callbacks. Refs callbacks are recommended by React. </p> <h4>What is a higher order component?</h4> <p>A higher order component is a function that takes a component as a parameter and returns a new component. HOC allows you to reuse code, logic, and bootstrapping abstractions. The most common one is probably Redux’s connect function. In addition to simply sharing tool libraries and simple composition, the best way for HOC is to share behaviors between React components. If you find that you have written a lot of code in different places to do the same thing, you should consider refactoring the code into a reusable HOC. </p> <p>Exercise</p> <p>Write a HOC that reverses its input</p> <p>Write a HOC that provides data from the API to the incoming component</p> <p>Write a HOC that implements shouldComponentUpdate To avoid reconciliation HOC</p> <p>Write a HOC that sorts the child components of the incoming component through React.Children.toArray</p> <h4>What are the advantages of using arrow functions</h4> <div> <p>Scope safety: Before the arrow function, each newly created function has its own this value (in the constructor, it is a new object; in strict mode, this in the function call is undefined ; if the function is called an "object method", then the underlying object, etc.), but arrow functions don't, it uses the this value of the enclosing execution context. </p> <p>Simple: Arrow functions are easy to read and write</p> <p>Clear: When everything is an arrow function, any regular function can be used immediately to define the scope. Developers can always look for next-higher function statements to see the value of this</p> </div> <h4>Why it is recommended that the parameter passed to setState is a callback instead of an object</h4> <p>Because the updates of this.props and this.state may be asynchronous, their values ​​cannot be relied on to calculate the next state. </p> <h4>In addition to binding <code>this</code> in the constructor, is there any other way?</h4> <p>You can use property initializers to bind the callback correctly , create-react-app is also supported by default. In callbacks you can use arrow functions, but the problem is that a new callback is created every time the component renders. </p> <h4>How to prevent the rendering of the component</h4> <p>Returning null in the render method of the component will not affect the life cycle method of the triggered component</p> <h4>When rendering a list, what is the key ? What is the purpose of setting key</h4> <p>Keys will help React identify which items have changed, been added or removed. Keys The elements within the array should be assigned to give the (DOM) element a stable identity, choose a key The best approach is to use a string that uniquely identifies a list item. Many times you will use IDs in the data as keys, when you don't have stable IDs When used with rendered items, you can use the item index as the key to render the item, but this is not recommended because if items can be reordered, it will cause re-rendering to be slower. </p> <h4>What is the purpose of calling super(props) (in the constructor)</h4> <p>Before super() is called, subclasses cannot use this. In ES2015, subclasses must Call super() in the constructor. The reason for passing props to super() is to facilitate access to this.props in the constructor (in subclasses). </p> <h4>What is JSX</h4> <p>JSX is a syntax extension of JavaScript syntax and has all the functions of JavaScript. JSX Production React "Element", you can wrap any JavaScript expression in curly braces and embed it in JSX. After compilation is complete, the JSX expression becomes a regular JavaScript object, which means you can use JSX inside if statements and for loops, assign it to a variable, accept it as an argument, and return it from functions. </p> <h4>How to use React.createElement to rewrite the following code</h4> <p>Question: </p> <pre class="brush:php;toolbar:false">const element = (   <h1 className="greeting">     Hello, rdhub.cn!   </h1> );</pre> <p>Answer: </p> <pre class="brush:php;toolbar:false">const element = React.createElement(   'h1',   {className: 'greeting'},   'Hello, rdhub.cn!' );</pre> <h4>What is <code>Children</code> </h4> <p>In JSX expressions, the content between an opening tag (such as <a>) and a closing tag (such as </a>) will be automatically passed to props.children as a special attribute Contains its components. </p> <p>This property has many methods available, including React.Children.map, React.Children.forEach, React.Children.count, React.Children.only, React.Children.toArray. </p> <h4>In React, what is state</h4> <p>State is similar to props, but it is private and completely controlled by the component itself. State is essentially an object that holds data and determines how the component is rendered. </p> <h4>What reasons would prompt you to break away from the dependency of create-react-app</h4> <p>When you want to configure webpack or babel presets. </p> <h4>What is redux</h4> <p>The basic idea of ​​Redux is to keep the entire application state in a single store. store is a simple javascript object, and the only way to change the application state is to trigger actions in the application and then write reducers for these actions to modify state. The entire state transformation is done in reducers and should not have any side effects. </p> <h4>In Redux, what is store</h4> <p>Store is a javascript object that saves the state of the entire application. At the same time, Store also assumes the following responsibilities: </p> <p>Allow access to state through getState()</p> <p>Run state through dispatch(action)</p> <p>Register listeners through subscribe(listener) </p> <p>Handle the logout of listeners through the function returned by subscribe(listener)</p> <h4>What is action</h4> <p>Actions is a pure javascript object, they must have a type attribute indicating that they are being executed The type of action. Essentially, an action is the payload that sends data from the application to the store. </p> <h4>What is a reducer</h4> <p>A reducer is a pure function that takes the previous state and an action as parameters and returns the next state. </p> <h4>What is the role of Redux Thunk</h4> <p>Redux thunk is a middleware that allows you to write actions creators that return a function instead of an action. If a certain condition is met, thunk can be used to delay the dispatch of action (dispatch), which can handle the dispatch of asynchronous action (dispatch). </p> <h4>What is a pure function?</h4> <p>A pure function is a function that does not depend on and does not change the state of variables outside its scope. This also means that a pure function The same parameters always return the same results. </p> <p class="comments-box-content"></p><p>The above is the detailed content of (Collection) Introduction to common interview questions in React. For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">JavaScript</a> <a href="javascript:void(0);">中间件</a> <a href="javascript:void(0);">ajax</a> <a href="javascript:void(0);">angular.js</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">angular</a> <a href="javascript:void(0);">webpack</a> <a href="javascript:void(0);">String</a> <a href="javascript:void(0);">NULL</a> <a href="javascript:void(0);">if</a> <a href="javascript:void(0);">count</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">foreach</a> <a href="javascript:void(0);">封装</a> <a href="javascript:void(0);">子类</a> <a href="javascript:void(0);">构造函数</a> <a href="javascript:void(0);">select</a> <a href="javascript:void(0);">回调函数</a> <a href="javascript:void(0);">字符串</a> <a href="javascript:void(0);">循环</a> <a href="javascript:void(0);">数据结构</a> <a href="javascript:void(0);">class</a> <a href="javascript:void(0);">Property</a> <a href="javascript:void(0);">map</a> <a href="javascript:void(0);">JS</a> <a href="javascript:void(0);">function</a> <a href="javascript:void(0);">对象</a> <a href="javascript:void(0);">作用域</a> <a href="javascript:void(0);">事件</a> <a href="javascript:void(0);">constructor</a> <a href="javascript:void(0);">严格模式</a> <a href="javascript:void(0);">dom</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">异步</a> <a href="javascript:void(0);">input</a> <a href="javascript:void(0);">算法</a> <a href="javascript:void(0);">ui</a> <a href="javascript:void(0);">重构</a> <a href="javascript:void(0);">SEO</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>This article is reproduced at:segmentfault.com. If there is any infringement, please contact admin@php.cn delete</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="What are the uses of if statements, multi-branch statements, and nested statements in js" href="https://m.php.cn/faq/412080.html">What are the uses of if statements, multi-branch statements, and nested statements in js</a></span><span>Next article：<a class="dBlack" title="What are the uses of if statements, multi-branch statements, and nested statements in js" href="https://m.php.cn/faq/412094.html">What are the uses of if statements, multi-branch statements, and nested statements in js</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/388285.html" title="React.js props" class="aBlack">React.js props</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/388288.html" title="CSS usage in React.js" class="aBlack">CSS usage in React.js</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/388366.html" title="Explain common problems and solutions in react.js" class="aBlack">Explain common problems and solutions in react.js</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/388373.html" title="A description of ternary operations in react.js" class="aBlack">A description of ternary operations in react.js</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/388378.html" title="React.js implements dynamic font color switching description" class="aBlack">React.js implements dynamic font color switching description</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/409835.html" title="How to use React.js? Introduction to the simple use of react.js (with examples)" class="aBlack">How to use React.js? Introduction to the simple use of react.js (with examples)</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>