React 速查表

React 是一个开源的JavaScript库，用于以声明性和高效的方式创建用户界面。它是一个基于组件的前端库，仅负责 模型-视图-控制器(MVC) 结构中的视图层。React用于创建模块化的用户界面，并促进可重用的UI组件的开发，这些组件可以显示动态数据。

React 速查表

React速查表 为您提供了常用的React方法的简单、快速参考。所有重要的组件和方法都在这一页上提供了。

样板代码： 按照以下步骤创建样板代码

步骤1： 使用以下命令创建应用程序

npx create-react-app <<Project_Name>>

步骤2： 使用命令导航到文件夹

cd <<Project_Name>>

步骤3： 打开App.js文件，写入以下代码

// App.js 
  
import React from 'react'; 
import './App.css'; 
export default function App() { 
    return ( 
        <div > 
            Hello Geeks 
            Lets start learning React 
        </div> 
    ) 
}

React元素

React元素与DOM元素不同，因为React元素是简单的JavaScript对象且创建效率很高。React元素是任何React应用程序的构建模块，不应与React组件混淆。

类元素属性

将属性传递给一个元素。主要的变化是将class更改为className

<div className= “exampleclass”></div>

样式元素属性

添加自定义样式。我们必须以双括号的形式传递值，如{{}}

<div style= {{styleName: Value}}</div>

片段

用于创建单个父组件

<>//Other Components</>

ReactJS导入和导出

在ReactJS中，我们使用导入和导出来导入已经创建的模块，并分别导出我们自己的组件和模块。

导入/导出的类型	描述	语法
导入默认导出	从模块中导入默认导出	`import MOD_NAME from "PATH"`
导入命名值	从模块中导入命名导出	`import {NAME} from "PATH"`
多个导入	用于导入多个模块，可以是用户定义的或npm包	`import MOD_NAME, {NAME} from "PATH"`
默认导出	创建一个默认导出。每个组件可以有一个默认导出	`export default MOD_NAME`
命名导出	当单个模块中有多个组件时，创建命名导出	`export default {NAME}`
多个导出	导出多个命名组件	`export default {NAME1, NAME2}`

React组件

组件是React的核心构建块之一。在React中，组件基本上会返回一段JSX代码，告诉屏幕上应该渲染什么。

组件	描述	语法
功能型	简单的JS函数，无状态	`function demoComponent() { return (<> // CODE </>); }`
基于类的	使用JS类创建有状态的组件	`class Democomponent extends React.Component { render() { return <>//CODE</>; } }`
嵌套型	在另一个组件中创建组件	`function demoComponent() { return (<> <Another_Component/> </>); }`

// Functional Component 
  
export default function App() { 
    return ( 
        <div > 
            Hello Geeks 
            Lets start learning React 
        </div> 
    ) 
} 
  
// Class Component with nesting 
class Example extends React.Component { 
  render() { 
    return ( 
          <div > 
              <App/> 
            Hello Geeks 
            Lets start learning React 
        </div> 
     ) 
  } 
}

在组件内外管理数据（状态与属性）

属性	描述	语法
props	在组件之间传递数据，只读。主要在函数式组件中使用	`// Passing<br/><Comp prop_name=”VAL”/><br/><br/>//Accessing<br/><Comp>{this.props.prop_name}</Comp>`
state	在组件内部管理数据，可变。与类组件一起使用	`constructor(props) { super(props); this.state = { var: value, }; }`
setState	使用回调函数更新状态的值。它是一个异步函数调用	`this.setState((prevState)=>({ // CODE LOGIC }))`

const App = () => { 
  const message = "Hello from functional component!"; 
  
  return ( 
    <div> 
      <ClassComponent message={message} /> 
    </div> 
  ); 
}; 
  
class ClassComponent extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      message: this.props.message 
    }; 
  } 
  
  render() { 
    return ( 
      <div> 
        <h2>Class Component</h2> 
        <p>State from prop: {this.state.message}</p> 
      </div> 
    ); 
  } 
}

组件的生命周期

ReactJS中的生命周期方法用于控制组件在不同阶段的初始化和卸载。

挂载阶段方法

方法	描述	语法
constructor	在组件呈现之前运行	`constructor(props){}`
render	用于呈现组件	`render()`
componentDidMount	在组件呈现后运行	`componentDidMount()`
componentWillUnmount	在组件从DOM中移除之前运行	`comoponentWillUnmount()`
componentDidCatch	用于捕捉组件中的错误	`componentDidCatch()`

更新阶段的方法

方法	描述	语法
componentDidUpdate	组件更新后调用	`componentDidUpdate(prevProp, prevState, snap)`
shouldComponentUpdate	避免在重新渲染时调用	`shouldComponentUpdate(newProp. newState)`
render	更新后渲染组件	`render()`

import React from 'react'; 
import ReactDOM from 'react-dom'; 
  
class Test extends React.Component { 
    constructor(props) { 
        super(props); 
        this.state = { hello: "World!" }; 
    } 
  
    componentWillMount() { 
        console.log("componentWillMount()"); 
    } 
  
    componentDidMount() { 
        console.log("componentDidMount()"); 
    } 
  
    changeState() { 
        this.setState({ hello: "Geek!" }); 
    } 
  
    render() { 
        return ( 
            <div> 
                <h1>GeeksForGeeks.org, Hello{this.state.hello}</h1> 
                <h2> 
                    <a onClick={this.changeState.bind(this)}>Press Here!</a> 
                </h2> 
            </div>); 
    } 
  
    shouldComponentUpdate(nextProps, nextState) { 
        console.log("shouldComponentUpdate()"); 
        return true; 
    } 
  
    componentWillUpdate() { 
        console.log("componentWillUpdate()"); 
    } 
  
    componentDidUpdate() { 
        console.log("componentDidUpdate()"); 
    } 
} 
  
ReactDOM.render( 
    <Test />, 
    document.getElementById('root'));

条件渲染

在React中，条件渲染用于根据某些条件渲染组件。只有当条件满足时，组件才会被渲染。这有助于封装，因为用户只能看到所需的组件，而不会看到其他内容。

类型	描述	语法
if-else	使用if-else块渲染组件	if (condition) { return `<COMP1 />;` }else{ return `<COMP2/>;` }
逻辑与运算符	根据条件显示/隐藏单个组件	`{condition && <Component/>}`
三元运算符	使用if-else块渲染组件	{Condition `? <COMP1/>` `: <COMP2/>` }

// Conditional Rendering Using if-else 
  
import React from 'react'; 
import ReactDOM from 'react-dom'; 
  
// Example Component 
function Example(props) 
{ 
    if(!props.toDisplay) 
        return null; 
    else
        return <h1>Component is rendered</h1>; 
} 
  
ReactDOM.render( 
    <div> 
        <Example toDisplay = {true} /> 
        <Example toDisplay = {false} /> 
    </div>, 
    document.getElementById('root') 
);

// Conditional rendering using ternary operator 
  
import React from 'react'; 
  
class Example extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      isLoggedIn: true, 
    }; 
  } 
  
  render() { 
    const { isLoggedIn } = this.state; 
  
    return ( 
      <div> 
        <h1>Small Conditional Rendering Example</h1> 
        {isLoggedIn ? ( 
          <p>Welcome, you are logged in!</p> 
        ) : ( 
          <p>Please log in to access the content.</p> 
        )} 
      </div> 
    ); 
  } 
} 
  
export default Example;

// Conditional Rendering using && operator 
  
import React from 'react'; 
import ReactDOM from 'react-dom'; 
  
// Example Component 
function Example() 
{ 
    const counter = 5; 
  
    return(<div> 
            { 
                (counter==5) && 
                <h1>Hello World!</h1> 
            } 
        </div> 
        ); 
} 
  
ReactDOM.render( 
    <Example />, 
    document.getElementById('root') 
);

React列表

我们可以在React中以类似常规JavaScript的方式创建列表，即通过将列表存储在一个数组中。为了遍历列表，我们将使用map()函数。

在React中使用键来标识列表中更改、更新或删除的项目。键用于为列表中的元素提供身份。建议使用字符串作为唯一标识列表中项目的键。

代码片段：

const arr = [];  
const listItems = numbers.map((number) =>  
  <li key={number.toString()}>  
    {number}  
  </li>  
);

import React from 'react'; 
import ReactDOM from 'react-dom'; 
  
const numbers = [1,2,3,4,5]; 
  
const updatedNums = numbers.map((number)=>{ 
    return <li>{number}</li>; 
}); 
  
ReactDOM.render( 
    <ul> 
        {updatedNums} 
    </ul>, 
    document.getElementById('root') 
);

React DOM 事件

类似于HTML事件，React DOM事件用于根据用户输入执行事件，例如点击（click）、改变（onChange）、鼠标悬停（mouseOver）等

方法	描述	语法
点击	触发点击事件	`<button onClick ={func}>内容</button>`
更改	当组件中检测到变化时触发	`<input onChange ={handleChange} />`
提交	当表单被提交时触发事件	`<form onSubmit={(e) => {//逻辑}}></form>`

import React, { useState } from "react"; 
  
const App = () => { 
// Counter is a state initialized to 0 
const [counter, setCounter] = useState(0) 
  
// Function is called everytime increment button is clicked 
const handleClick1 = () => { 
    // Counter state is incremented 
    setCounter(counter + 1) 
} 
  
// Function is called everytime decrement button is clicked 
const handleClick2 = () => { 
    // Counter state is decremented 
    setCounter(counter - 1) 
} 
  
return ( 
    <div> 
    Counter App 
        <div style={{ 
            fontSize: '120%', 
            position: 'relative', 
            top: '10vh', 
        }}> 
            {counter} 
        </div> 
        <div className="buttons"> 
            <button onClick={handleClick1}>Increment</button> 
            <button onClick={handleClick2}>Decrement</button> 
        </div> 
    </div> 
) 
} 
  
export default App

React Hooks

Hooks（钩子）用于在函数组件中使用状态，并管理React中的副作用。它们在React 16.8中引入。开发人员可以使用它们来使用状态和其他React特性而无需编写类。例如，组件的状态。需要注意的是，hooks不用于类中。

钩子	描述	语法
useState	在函数内声明状态变量	`const [var, setVar] = useState(Val);`
useEffect	处理React中的副作用	`useEffect(<FUNCTION>, <DEPENDECY>)`
useRef	直接创建对DOM元素的引用	`const refContainer = useRef(initialValue);`
useMemo	返回记忆化的值	`const memVal = useMemo(function, arrayDependencies)`

import React, { useState } from 'react'; 
import ReactDOM from 'react-dom/client'; 
function App() { 
    const [click, setClick] = useState(0); 
    // using array destructuring here 
    // to assign initial value 0 
    // to click and a reference to the function 
    // that updates click to setClick 
    return ( 
        <div> 
            <p>You clicked {click} times</p> 
  
            <button onClick={() => setClick(click + 1)}> 
                Click me 
            </button> 
        </div> 
    ); 
} 
  
export default App; 
  
const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render( 
<React.StrictMode> 
    <App /> 
</React.StrictMode> 
);

PropTypes

PropTypes在React中用于检查传入组件的prop的值。这些在错误处理中非常有用，并且在大规模应用程序中非常有用。

原始数据类型

类型	类/语法	示例
字符串	PropTypes.string	`“Geeks”`
对象	PropType.object	`{course: “DSA”}`
数字	PropType.number	`15,`
布尔值	PropType.bool	`true`
函数	PropType.func	`const GFG ={return “Hello”}`
符号	PropType.symbol	`Symbol(“symbole_here”`

数组类型

类型	类/语法	示例
数组	PropTypes.array	`[]`
字符串数组	PropTypes.arrayOf([类型])	`[15,16,17]`
数字数组	PropTypes.oneOf([数组])	`[“Geeks”, “For”, “Geeks”`
对象数组	PropTypes.oneOfType([类型])	`PropTypes.instanceOf()`

对象类型

类型	类/语法	示例
对象	PropTypes.object()	`{course: "DSA"}`
数字对象	PropTypes.objectOf()	`{id: 25}`
对象形状	PropTypes.shape()	`{course: PropTypes.string, price: PropTypes.number}`
实例	PropTypes.objectOf()	`new obj()`

import PropTypes from 'prop-types'; 
import React from 'react'; 
import ReactDOM from 'react-dom/client'; 
  
// Component 
class ComponentExample extends React.Component{ 
    render(){ 
        return( 
                <div> 
                  
                    {/* printing all props */} 
                    <h1> 
                        {this.props.arrayProp} 
                        <br /> 
  
                        {this.props.stringProp} 
                        <br /> 
  
                        {this.props.numberProp} 
                        <br /> 
  
                        {this.props.boolProp} 
                        <br /> 
                    </h1> 
                </div> 
            ); 
    } 
} 
  
// Validating prop types 
ComponentExample.propTypes = { 
    arrayProp: PropTypes.array, 
    stringProp: PropTypes.string, 
    numberProp: PropTypes.number, 
    boolProp: PropTypes.bool, 
} 
  
// Creating default props 
ComponentExample.defaultProps = { 
  
    arrayProp: ['Ram', 'Shyam', 'Raghav'], 
    stringProp: "GeeksforGeeks", 
    numberProp: "10", 
    boolProp: true, 
} 
  
const root = ReactDOM.createRoot(document.getElementById("root")); 
root.render( 
<React.StrictMode> 
    <ComponentExample /> 
</React.StrictMode> 
);