in the process of learning, the teacher said that using stateless components can greatly improve performance, but recently, when reading the book "React Design patterns and Best practices", section 9.2.2 said that stateless components would not actually bring any state improvement. The teacher"s version is 16, and the book version is 15
. So the question comes: is JavaScript the best language in the world? (: angle)
Don't say whether the performance of stateless components has improved,
even if you bind in render, it will not have much impact on performance, which can be confirmed by benchmark (it is generally believed that bind in render will have a greater impact on performance).
in addition, it is corrected that stateless components are not without lifecycles, and those without lifecycles should be functional components. So it doesn't make sense for stateless components to perform better,
guess what you're trying to say is that function components perform better. If you only compare a functional component with a non-functional component (there are no child components and parent components), there is no doubt that the performance is better (that's what your teacher may be talking about), but the actual project is used in combination, not necessarily. Therefore, non-functional components can use SCU to control whether the render, function component does not have such optimization space (which can be solved by internally maintaining a cache of LRU).
in short, not necessarily, depending on the situation
depends on how you use it.
in theory, stateless components have no doubt about performance improvement. Why?
the difference between stateless components and stateful components is that there is no React life cycle in stateless components. Stateless components do not have their own state, except the external props, so there will not be state changes in their own components that trigger the diff algorithm and will not re-render. (but external props changes still execute the diff algorithm.)
maybe that's the point that affects performance! To say that greatly improve performance, this point is not the same, but also exaggerated, this poor performance should not be perceived.
Previous: Does jenkins have plug-ins or interfaces to get historical build data?
Next: Iviewui select components do not display in 360browser compatibility mode
1. Write the landing page with react, after calling the background data with axios, judge the route of the page to jump according to the return value, how to jump? 2.axios.get ( login login.action?username= +name+ &password= +pd, {) timeout: 1000...
setting in state: this.state = {checkList: []}; checkList initializes it with an array of the same length as JsonPage: this.setState ({checkList:checkSaveCount}); checkSavaCount is the same length as the following JsonPage. the following creates...
import React from react ; class PublicScreen extends React.Component { constructor(props) { super(props); this.getStyle = this.getStyle.bind(this); } getStyle() { const { width = 1920, height = 1080 } = this.pr...
renderdphtmldvareturnapiBackend: apiBackend ...
react projects cannot save store? using redux, data index.js ReactDOM.render( <Provider store={store}> <Router > < Provider>, document.getElementById( root )) registerServiceWorker() actions export const SET_USER = ...
this method is included in the constructor of most components, so what exactly is this method for constructor(props,context){ super(props,context) } ...
use the Table component of Antd Design, first check out the data, and then select a CheckBox, but when you change pages, that CheckBox will not disappear. For example, when I select the first line on the first page, and then skip to the second page, the ...
I can run before packaging without any error reports. This problem occurs after packaging. reports such an error in the browser, using scaffolding made by create-react-app, and the back end is Node.js, backend. No error is reported: packages two diff...
segmentfault dvaws.open().websocketwebsocketws ws.openfetchGETloginsendfetchCOOKIECOOKIEFETCHCOOKIECOOKIE ...
...
now we need to develop a website to generate front-end pages based on the node ID saved in the database. For example, the json data is: let data=[ {"id":1,"pid":0,"type":"div"}, {"id":2,"pi...
I pass values through redux scenario is when I click on the navigation bar of component 1 and refresh the ajax of component 2 is the data returned by ajax accepted by this.state.contnet what should I write? There is an urgent need for ideas. ...
official example of full copy: this is the official sample code: import { Select } from antd ; const Option = Select.Option; function handleChange(value) { console.log(`selected ${value}`); } ReactDOM.render( <div> <Select defaul...
how to use react to change the value of Input < hr > export default class myForm extends Component{ constructor(props){ super(props); this.state = { id: , }; } change=()=>{ var idIn...
want to set the meta tag to solve the adaptive problem <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> meta LOGO ...
use list as the option data source for Select, but use callback, which cannot be rendered. Just call it directly, as shown in the figure below. The first method is fine, and the second is not. Because there are many Select, on a page, you need to use th...
< H1 > github address < H1 > error will be reported when using npm run dev const path = require( path ); const merge = require( webpack-merge ); const common = require( . webpack.common.js ); dev-server let BundleAnalyzerPlugin = require( ...
import React from react ; import ReactDOM from react-dom ; import . assets styles index.less ; import Green from . assets images green.png ; import Red from . assets images red.png ; class Circle extends React.Component { constructor...
There are two areas in the State and Lifecycle section that I don t quite understand 1. State Updates are Merged The merging is shallow, so this.setState ({comments}) leaves this.state.posts intact, but completely replaces this.state.comments. ...
like this [array [xxx], array [xxx], array [xxx].] merge all xxx in array into one array [xxx.] ...