ReactJS 功能组件

函数式组件是在 React 中工作时会遇到的一些更常见的组件。这些只是 JavaScript 函数。我们可以通过编写 JavaScript函数来为 React 创建一个函数式组件。这些函数可能会也可能不会接收数据作为参数。在功能组件中，返回值是要渲染到 DOM 树的 JSX 代码。
示例：演示功能组件创建的程序。

Filepath-src/index.js：打开你的 React 项目目录并编辑 src 文件夹中的index.js文件：

Javascript

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

Filepath-src/App.js：打开你的 React 项目目录并编辑 src 文件夹中的App.js文件：

javascript

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

输出：

示例：我们也可以将一个功能组件转化为另一个组件。下面的程序是为了演示功能组件在其他组件中的使用。

Filepath- src index.js：打开你的 React 项目目录并编辑 src 文件夹中的Index.js文件

Javascript

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

Filepath- src App.js：打开你的 React 项目目录并编辑 src 文件夹中的App.js文件：

javascript

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

输出：

与基于类的组件相比，功能组件缺乏大量的特性。这个差距是在一个名为“钩子”的特殊 ReactJS 概念的帮助下弥补的。 Hooks 是允许在功能组件中使用 ReactJS 特性的特殊功能。

功能组件不能像基于类的组件那样访问专用的状态变量。功能组件有效访问的唯一“状态”是从其父组件传递给它的道具。 ReactJS 可以访问一个叫做useState()的特殊钩子，它可以用来给人一种在功能组件中使用状态的错觉。 useState()用于只初始化一个状态变量来初始化多个状态变量，需要多个useState()声明。返回的第一个值是状态变量的初始值，而返回的第二个值是对更新它的函数的引用。当状态变量需要更新时，可以调用update函数，直接在里面更新状态变量。

示例：演示使用useState() hook的程序。

Filepath-src/index.js：打开你的 React 项目目录并编辑 src 文件夹中的Index.js文件：

Javascript

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

Filepath-src/App.js：打开你的 React 项目目录并编辑 src 文件夹中的App.js文件：

javascript

import React, { useState } from 'react';
  
const Example=()=> {
  const [change, setChange] = useState(true);     
      return (
        

         setChange(!change)}>
          Click Here!
        
        {change?
Welcome to GeeksforGeeks
:
                
A Computer Science Portal for Geeks
}
        
        );
  }
 
export default Example;

输出：

功能组件不能像基于类的组件那样访问生命周期函数，因为生命周期函数需要在类的边界内定义。如果生命周期函数需要与功能组件一起使用，则需要使用名为 useEffect() 的特殊 React 钩子。值得注意的是， useEffect()并不是生命周期函数的完全复制品——它的工作方式和行为方式略有不同。

示例：演示使用useEffect() hook的程序。

Filepath-src/index.js：打开你的 React 项目目录并编辑 src 文件夹中的index.js文件：

Javascript

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

Filepath-src/App.js：打开你的 React 项目目录并编辑 src 文件夹中的App.js文件：

javascript

import React, { useEffect } from 'react';
 
const Example=()=> {
  useEffect(() => {
    console.log("Mounting...");
  });
      return (
      

        Geeks....!
      
      );
}
 
export default Example;

输出：

数据以 props 的形式从父组件传递到子组件。 ReactJS 通常不允许组件修改自己的 props。修改 props 的唯一方法是更改传递给子组件的 props。这通常通过将父组件中的函数引用传递给子组件来完成。 props 在功能组件中更重要，原因很简单，与基于类的组件不同，功能组件无法访问状态。

示例：演示道具使用的程序。

Filepatje-src/index.js：打开你的 React 项目目录并编辑 src 文件夹中的Index.js文件：

Javascript

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

Filepath-src/App.js：打开你的 React 项目目录并编辑 src 文件夹中的App.js文件：

javascript

import React, { useState } from 'react';
import props from 'prop-types';
 
const Example=()=> {
  return(
    
{props.data}
    );
    }
    function propsExample()
    {       
    const [change, setChange] = useState(true);
        return (
        

           setChange(!change)}>
            Click Here!
          
          {change?
            :
            }
        
        );
    }
 
export default Example;

输出：