Функциональные компоненты ReactJS

Функциональные компоненты - одни из наиболее распространенных компонентов, которые встречаются при работе в React. Это просто функции JavaScript. Мы можем создать функциональный компонент для React, написав функцию JavaScript. Эти функции могут получать или не получать данные в виде параметров. В функциональных компонентах возвращаемое значение - это JSXcode для рендеринга в дерево DOM.

Пример: программа для демонстрации создания функциональных компонентов.

• Путь к файлу - src / index.js: откройте каталог проекта React и отредактируйте файл index.js из папки src:

  Javascript

  
  

  
  
  

  import React from 'react' ; import ReactDOM from 'react-dom' ; import Demo from './App' ; ReactDOM.render( <React.StrictMode> <Demo /> </React.StrictMode>, document.getElementById( 'root' ) );

• Путь к файлу - src / App.js: откройте каталог проекта React и отредактируйте файл App.js из папки src:

  javascript

  
  

  
  
  

  import React from 'react' ; import ReactDOM from 'react-dom' ; const Demo=()=> { return <h1>Welcome to GeeksforGeeks</h1>; } export Demo; default

Выход:

Пример: мы также можем использовать функциональный компонент в другом компоненте. Приведенная ниже программа демонстрирует использование функциональных компонентов в других компонентах.

• Путь к файлу - src index.js: откройте каталог проекта React и отредактируйте файл Index.js из папки src:

  Javascript

  
  

  
  
  

  import React from 'react' ; import ReactDOM from 'react-dom' ; import Welcome from './App' ; ReactDOM.render( <React.StrictMode> <Welcome /> </React.StrictMode>, document.getElementById( 'root' ) );

• Filepath- src App.js: откройте каталог проекта React и отредактируйте файл App.js из папки src:

  javascript

  
  

  
  
  

  import React from 'react' ; const Welcome=()=> { return ( <h1>Welcome to GeeksforGeeks</h1> ); } const functionExample=()=> { return ( <Welcome/> ); } export default Welcome;

Выход:

Функциональным компонентам не хватает значительного количества функций по сравнению с компонентами на основе классов . Этот пробел восполняется с помощью специальной концепции ReactJS, называемой «крючками» . Хуки - это специальные функции, которые позволяют использовать функции ReactJS в функциональных компонентах .

Функциональные компоненты не имеют доступа к выделенным переменным состояния, таким как компоненты на основе классов . Единственное «состояние», к которому фактически имеет доступ функциональный компонент, - это реквизиты, переданные ему от его родительского компонента. ReactJS имеет доступ к специальному хуку useState (), который можно использовать для создания иллюзии работы с состоянием в функциональных компонентах. UseState () используется для инициализации только одной переменной состояния для инициализации нескольких переменных состояния, требуется несколько объявлений useState () . Первое возвращаемое значение - это начальное значение переменной состояния, а второе возвращаемое значение - это ссылка на функцию, которая его обновляет. Когда необходимо обновить переменную состояния, это можно сделать, вызвав функцию обновления и обновив переменную состояния непосредственно внутри нее.

Пример: программа для демонстрации использования ловушки useState () .

• Путь к файлу src / index.js: откройте каталог проекта React и отредактируйте файл Index.js из папки src:

  Javascript

  
  

  
  
  

  import React from 'react' ; import ReactDOM from 'react-dom' ; import Example from './App' ; ReactDOM.render( <React.StrictMode> <Example /> </React.StrictMode>, document.getElementById( 'root' ) );

• Путь к файлу - src / App.js: откройте каталог проекта React и отредактируйте файл App.js из папки src:

  javascript

  
  

  
  
  

  import React, { useState } from 'react' ; const Example=()=> { const [change, setChange] = useState( true ); return ( <div> <button onClick = {() => setChange(!change)}> Click Here! </button> {change?<h1>Welcome to GeeksforGeeks</h1>: <h1>A Computer Science Portal for Geeks</h1>} </div> ); } export default Example;

Выход:

Функциональные компоненты не имеют доступа к функциям жизненного цикла, в отличие от компонентов на основе классов, поскольку функции жизненного цикла необходимо определять в границах класса. Если функции жизненного цикла необходимо использовать с функциональными компонентами, необходимо использовать специальный перехватчик React, называемый useEffect (). Стоит отметить, что useEffect () не является точной копией функций жизненного цикла - он работает и ведет себя несколько иначе.

Пример: программа для демонстрации использования ловушки useEffect () .

• Путь к файлу - src / index.js: откройте каталог проекта React и отредактируйте файл index.js из папки src:

  Javascript

  
  

  
  
  

  import React from 'react' ; import ReactDOM from 'react-dom' ; import Example from './App' ; ReactDOM.render( <React.StrictMode> <Example /> </React.StrictMode>, document.getElementById( 'root' ) );

• Путь к файлу - src / App.js: откройте каталог проекта React и отредактируйте файл App.js из папки src:

  javascript

  
  

  
  
  

  import React, { useEffect } from 'react' ; const Example=()=> { useEffect(() => { console.log( "Mounting..." ); }); return ( <h1> Geeks....! </h1> ); } export default Example;

Выход:

Данные передаются от родительского компонента к дочерним компонентам в виде свойств. ReactJS, как правило, не позволяет компоненту изменять свои собственные свойства. Единственный способ изменить свойства - это изменить свойства, передаваемые дочернему компоненту. Обычно это делается путем передачи ссылки на функцию в родительском компоненте дочернему компоненту. Свойства имеют большее значение в функциональных компонентах по той простой причине, что функциональные компоненты не имеют доступа к состоянию, в отличие от компонентов на основе классов.

Пример: программа для демонстрации использования реквизита.

• Filepatje- src / index.js: откройте каталог проекта React и отредактируйте файл Index.js из папки src:

  Javascript

  
  

  
  
  

  import React from 'react' ; import ReactDOM from 'react-dom' ; import Example from './App' ; ReactDOM.render( <React.StrictMode> <Example /> </React.StrictMode>, document.getElementById( 'root' ) );

• Путь к файлу - src / App.js: откройте каталог проекта React и отредактируйте файл App.js из папки src:

  javascript

  
  

  
  
  

  import React, { useState } from 'react' ; import props from 'prop-types' ; const Example=()=> { return ( <h1>{props.data}</h1> ); } function propsExample() { const [change, setChange] = useState( true ); return ( <div> <button onClick = {() => setChange(!change)}> Click Here! </button> {change? <Example data= "Welcome to GeeksforGeeks" />: <Example data= "A Computer Sciecne Portal for Geeks" />} </div> ); } export default Example;

Выход: