React 速查表

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

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中，我们使用导入和导出来导入已经创建的模块，并分别导出我们自己的组件和模块。

React组件

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

// 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> 
     ) 
  } 
}

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

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中的生命周期方法用于控制组件在不同阶段的初始化和卸载。

挂载阶段方法

更新阶段的方法

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

// 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）等

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不用于类中。

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的值。这些在错误处理中非常有用，并且在大规模应用程序中非常有用。

原始数据类型

数组类型

对象类型

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> 
);