Funktionell komponent är ett sätt att skapa komponenter i en React-applikation. React.js Functional Components hjälper till att skapa UI-komponenter på ett funktionellt och mer kortfattat sätt. I den här artikeln kommer vi att lära oss om funktionella komponenter i React, olika sätt att anropa den funktionella komponenten, och även lära oss hur man skapar de funktionella komponenterna. Vi kommer också att demonstrera användningen av krokar i funktionella komponenter
Innehållsförteckning
- Funktionella komponenter i React:
- Sätt att anropa den funktionella komponenten:
- Problem med att använda funktionella komponenter
- Fördel med att använda krokar i funktionella komponenter
Funktionella komponenter i React:
ReactJS Funktionella komponenter är några av de vanligaste komponenterna som kommer att stötas på när du arbetar i React. Dessa är helt enkelt JavaScript-funktioner. Vi kan skapa en funktionell komponent i React genom att skriva en JavaScript-funktion. Dessa funktioner kan ta emot data som parametrar eller inte. I de funktionella komponenterna är returvärdet JSX-koden som ska återges till DOM-trädet.
Sätt att anropa den funktionella komponenten:
Vi kan anropa funktionerna i javaScript på andra sätt enligt följande:
1. Anropa funktionen genom att använda namnet på funktionen följt av parenteserna.
// Example of Calling the function with function name followed by Parentheses function Parentheses() { return (; }; const PropsExample = () =>{ // const [change, setChange] = useState(true); const [ändring, setChange] = useState(false); return ( setChange(!change)}> Klicka här! {ändra ? ( 'Välkommen till techcodeview.com' /> ) : ( 'En datavetenskapsportal för nördar' /> )} ); }; export standard PropsExample;Steg för att köra programmet: Öppna terminalen och skriv följande kommando. npm start Utdata: Öppna webbläsaren och vårt projekt visas i URL:en http://localhost:3000/>