传递 props 时何时使用 this.prop？

Question

I'm a beginner in JS/React and I am trying to wrap my head around the concept of when to use this.prop or just passing props down without this in React.

In some sources, the coder always uses this.prop while in others this seems to be unnecessary. Could anyone please clarify?

1. In this example, we are passing props username, authed, logout, and header from apps to hello. To do so, we use this.props. everytime we import.

2. However, in this example (React Native), we pass down term, onTermChange, and onTermSubmit from searchscreen to searchbar, without using this.props. Then I believe we re-defined our props in the TextInput of Search bar so its onEndEditing is the same as the onTermSubmit from the searchscreen.

3. I thought this.props may be a react syntax which became streamlined in React Native. However, I came across yet another example in React which does not use this.props:

Answer 1

You will use "this" when you have a class component. When you have a functional component there is no need, because you're not creating an instance of a class. All arguments passed to a class are stored into "this.props".

So in your second example and third example, you have functional components, which take the consts passed to them not as props, but as actual constants with their own names.

Hope this helps.

Answer 2

props is being used in both scenarios. You are just accessing props values differently. First example uses Class component. That means props is passed to children as this.props , where as second example uses stateless/ functional component, which means no this . And

    const FunctionalComponent = (props) => {
        const {name, onLogin} = props
     ......
    }

is equivalent to

   const FunctionalComponent = ({name, onLogin}) => {
   .....
   }

due to Object Destructuring , hence you are not seeing explicit use of props in second example.

Answer 3

It's not a React thing but a JavaScript thing.

Classes - Here you need to access the state and props using the this keyword.

Functions - Here you don't need to use this in React. The argument to your function component here are props so you can directly use props.something and not this.props.something .

In your Searchbar component:-

const Searchbar = ({term,onTermSubmit,onTermChange}) means that the properties term , onTermSubmit and onTermChange are being destructured from the props object and so can now be used directly. You don't need to access them like props.term anymore. They can directly be accessed like term wherever you want them to be.