But what is the difference between both of them ?

From this post it seems like there is no difference and it is just different way of writing.

Please provide an example to make the difference more clear.

CodePudding user response：

All React Function Components are regular Javascript functions.

Not all regular Javascript functions are React Function Components.

Function components are just a signature for a specific function.

You can look at the Typescript definition to see exactly what that signature is:

    interface FunctionComponent<P = {}> {
        (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
        propTypes?: WeakValidationMap<P> | undefined;
        contextTypes?: ValidationMap<any> | undefined;
        defaultProps?: Partial<P> | undefined;
        displayName?: string | undefined;
    }

Reference: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/v17/index.d.ts#L542

And PropsWithChildren is defined as:

type PropsWithChildren<P> = P & { children?: ReactNode | undefined };

Reference: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/v17/index.d.ts#L822

The JSX parser will translate JSX and pass certain parameters to these functions.

JSX:

<CompOne someProperty="someValue"><CompTwo/></CompOne>

Equivalent to:

CompOne({someProperty: "someValue", children: CompTwo({})})

The signature is just letting you know how the JSX will be parsed, so you know how to access those parameters within your function.

The signature includes some additional info as well: the function should return a ReactElement or null, and it can have those four properties.

For example, I'm trying to log the someProperty value from CompOne:

<CompOne someProperty="someValue" someOtherProp="someOtherValue" />

CompOne(someProperty) {
  console.log(someProperty); // logs {someProperty: "someValue", someOtherProp: "someOtherValue"}
  return null;
}

This is incorrect, because I was not using the function as the Function Component signature describes. The JSX parser reads the properties into an object, and passes it as the first parameter to the function. Although the code will still execute, it is not what I intended to happen.

CompOne(props) {
  console.log(props.someProperty); // logs "someValue"
  return null;
}

This works as intended because I know the structure of a Function Component.

CodePudding user response：

I have tried my best to keep it as simple as I can for your understanding:-

Javascript functions:-

function add(a, b) {
  return a   b;
}

React functional component:-

import React from 'react';

const DisplayMessage = (props) => {
  return <h1>{props.message}</h1>;
};

export default DisplayMessage;

1. USE:- JS functions are particular to do a thing. as you see in the example it will do the addition of two numbers only.while React functional components are used to define components in React that can be rendered to the UI. The display component will render the functional component.

2. DEFINITION:- JS functions are defined using the function keyword, while React functional components are defined using the const keyword and an arrow function.

3. PROPS:- We can pass and receive props to react functional components but not too regular JS functions.

4. STATE:- JS function doesn't have any state while React functional component when declared in classes will have the state.

5. RENDERING:- JS function doesn't render any change in the value.while React functional component re-render on every state or props change.

CodePudding user response：

• A functional component in React is a function which returns React Element or null, while a function in Javascript can return any data type.

• React functional Component are used to define and render UI components.

• Regular javascript function does not have built-in State, while React functional component has access to useState to manage local state.

• Regular JavaScript functions do not have access to props, while React functional components receive and use props passed down from their parent component