Hello, everyone. I'm Carson. the following React component code uses three use keywords. Do you understand their role? 'use client' function App() { using data = use(ctx); // ... } it is true that I haven't written React for several days, and I can't even understand the grammar. This article will talk about the respective meanings of these use keywords. use client begins with the 'use client' declaration at the top of the code, which is used in a manner similar to the strict mode declaration: 'use strict'; // here is the JavaScript code in strict mode The 'use client' declaration is defined in the RSC ( React Server Component , server-side component) protocol. the React application of RSC is enabled. All components are rendered on the server by default (you can experience it through Next v13 ). Only component files that declare 'use client' are rendered at the front end. suppose our React application component structure is as follows, where red represents server component , blue represents client component (declare 'use client' ): then when the application is packaged, the D and E components will be packaged into separate files. On the front end, React can render A, B, C components directly. But for D and E, you need to request back the component code in the form of JSONP before rendering. using keyword then comes the using keyword before the data variable: using data = use(ctx); The using keyword is proposed by tc39 proposal ECMAScript Explicit Resource Management , and is used to provide unified lifecycle management (when…

Why did the React team discard defaultProps ? in functional components come to a conclusion first, because it is not necessary. in functional components, we can declare default properties in the form of JS default parameters, as follows: function Foo({foo = 1, bar = "hello"}) { let props = {foo, bar}; //... } The advantage of this is that React 's defaultProps is a black box for most teams. if we put the behavior of the default property in the function component definition, it is more controllable from the point of view of code quality. so what was defaultProps designed for? React the team thinks defaultProps is very useful in classes. because props objects are passed to many different methods: life cycle, callback, and so on. Each function has its own context that requires an initial default value. This makes it difficult to implement using the JS default parameter, because you have to copy the same default value in each function. The following is an example: class Foo { static defaultProps = {foo: 1}; componentDidMount() { let foo = this.props.foo; console.log(foo); } componentDidUpdate() { let foo = this.props.foo; console.log(foo); } componentWillUnmount() { let foo = this.props.foo; console.log(foo); } handleClick = () => { let foo = this.props.foo; console.log(foo); } render() { let foo = this.props.foo; console.log(foo); return <div onClick={this.handleClick} />; } } to sum up, the role of defaultProps is that in class components, new default values can be used in each lifecycle and scope of methods. therefore, it has been implemented in subsequent updates of the React team: using…