有史以来最好的React示例，值得学习

React（也称为React.js）是最流行的JavaScript前端开发库之一。这是React语法和用法的集合，您可以将其用作方便的指南或参考。

反应组件示例

组件可在React.js中重用。您可以按如下所示将值注入道具：

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;}const element = <Welcome name="Faisal Arkan" />;ReactDOM.render(
element,
document.getElementById('root'));

name="Faisal Arkan"将从中赋值{props.name}，function Welcome(props)并返回具有值的组件name="Faisal Arkan"。之后，React会将元素渲染为html。

声明组件的其他方式

使用React.js时有很多方法来声明组件。组件有两种，无状态组件和有状态组件。

有状态的

类类型组件

class Cat extends React.Component {
constructor(props) {
super(props);
this.state = {
humor: 'happy'
}
}
render() {
return(
<div>
<h1>{this.props.name}</h1>
<p>
{this.props.color}
</p>
</div>
);
}}

无状态组件

功能组件（ES6中的箭头功能）

const Cat = props => {
return (
<div>
<h1>{props.name}</h1>
<p>{props.color}</p>
</div>;
);};

隐式返回组件

const Cat = props => 
<div>
<h1>{props.name}</h1>
<p>{props.color}</p>
</div>;

片段是不使用包装器元素而呈现多个元素的方法。尝试在JSX中呈现不带有封闭标记的元素时，您会看到错误消息Adjacent JSX elements must be wrapped in an enclosing tag。这是因为当JSX转换时，它正在创建具有其相应标记名称的元素，并且如果找到多个元素，则不知道要使用哪个标记名称。

过去，对此的常见解决方案是使用wrapper div解决此问题。但是，React的版本16带来了的添加Fragment，因此不再需要此功能。

Fragment充当包装器而不向DOM添加不必要的div。您可以直接从React导入中使用它，也可以对其进行解构：

import React from 'react';class MyComponent extends React.Component {
render(){
return (
<React.Fragment>
<div>I am an element!</div>
<button>I am another element</button>
</React.Fragment>
);
}}export default MyComponent;

// Deconstructedimport React, { Component, Fragment } from 'react';class MyComponent extends Component {
render(){
return (
<Fragment>
<div>I am an element!</div>
<button>I am another element</button>
</Fragment>
);
}}export default MyComponent;

React版本16.2进一步简化了此过程，允许将空的JSX标签解释为片段：

return (
<>
<div>I am an element!</div>
<button>I am another element</button>
</>);

JSX

JSX是JavaScript XML的缩写。

JSX是在JavaScript中使用有效HTML语句的表达式。您可以将此表达式分配给变量，并在其他地方使用它。您可以将其他有效的JavaScript表达式和JSX放在这些HTML语句中，方法是将它们放在大括号（{}）中。Babel进一步将JSX编译为type对象React.createElement()。

单行和多行表达式

单行表达式易于使用。

const one = <h1>Hello World!</h1>;

当需要在单个JSX表达式中使用多行时，请在单个括号内编写代码。

const two = (
<ul>
<li>Once</li>
<li>Twice</li>
</ul>);

仅使用HTML标签

const greet = <h1>Hello World!</h1>;

将JavaScript表达式与HTML标签结合

我们可以在括号内使用JavaScript变量。

const who = "Quincy Larson";const greet = <h1>Hello {who}!</h1>;

我们还可以在花括号内调用其他JavaScript函数。

function who() {
return "World";}const greet = <h1>Hello {who()}!</h1>;

只允许使用一个父标签

JSX表达式必须只有一个父标记。我们只能添加嵌套在父元素内的多个标签。

// This is valid.const tags = (
<ul>
<li>Once</li>
<li>Twice</li>
</ul>);// This is not valid.const tags = (
<h1>Hello World!</h1>
<h3>This is my special list:</h3>
<ul>
<li>Once</li>
<li>Twice</li>
</ul>);

反应状态示例

状态是数据来源的地方。

我们应该始终尝试使状态尽可能简单，并减少有状态组件的数量。例如，如果我们有十个需要状态数据的组件，则应该创建一个容器组件，以保持所有状态的状态。

状态基本上就像一个全局对象，可以在组件中的任何地方使用。

有状态类组件的示例：

import React from 'react';class App extends React.Component {
constructor(props) {
super(props);

// We declare the state as shown below

this.state = { 
x: "This is x from state",
y: "This is y from state"
}
}
render() {
return (
<div>
<h1>{this.state.x}</h1>
<h2>{this.state.y}</h2>
</div>
);
}}export default App;

另一个例子：

import React from 'react';class App extends React.Component {
constructor(props) {
super(props);

// We declare the state as shown below
this.state = { 
x: "This is x from state",
y: "This is y from state"
}
}
render() {
let x1 = this.state.x;
let y1 = this.state.y;
return (
<div>
<h1>{x1}</h1>
<h2>{y1}</h2>
</div>
);
}}export default App;

更新状态

您可以使用setState组件上的方法来更改存储在应用程序状态中的数据。

this.setState({ value: 1 });

请记住，这setState是异步的，因此在使用当前状态设置新状态时应格外小心。一个很好的例子是，如果您想在状态中增加一个值。

错误的方法

this.setState({ value: this.state.value + 1 });

如果在同一更新周期内多次调用上述代码，则可能会导致应用程序出现意外行为。为了避免这种情况，您可以将updater回调函数传递给setState而不是对象。

正确的方式

this.setState(prevState => ({ value: prevState.value + 1 }));

更新状态

您可以使用setState组件上的方法来更改存储在应用程序状态中的数据。

this.setState({value: 1});

请记住，这setState可能是异步的，因此在使用当前状态设置新状态时应格外小心。一个很好的例子是，如果您想在状态中增加一个值。

错误的方法

this.setState({value: this.state.value + 1});

正确的方式

this.setState(prevState => ({value: prevState.value + 1}));

清洁方式

this.setState(({ value }) => ({ value: value + 1 }));

当状态对象中只需要有限数量的字段时，对象销毁可用于更干净的代码。

反应状态VS道具示例

当我们开始使用React组件时，我们经常听到两个术语。他们是state和props。因此，在本文中，我们将探讨这些内容以及它们之间的区别。

州：

状态是组件拥有的东西。它属于定义它的那个特定组件。例如，一个人的年龄就是那个人的状态。
状态是易变的。但是，只有拥有它的那个组件才能更改它。因为我只能改变年龄，没有其他人可以改变。
您可以使用更改状态 this.setState()

请参阅以下示例以了解状态：

Person.js

import React from 'react';
class Person extends React.Component{
constructor(props) {
super(props);
this.state = {
age:0
this.incrementAge = this.incrementAge.bind(this)
}
incrementAge(){
this.setState({
age:this.state.age + 1;
});
}
render(){
return(
<div>
<label>My age is: {this.state.age}</label>
<button onClick={this.incrementAge}>Grow me older !!<button>
</div>
);
}
}
export default Person;

在上面的示例中，age是Person组件的状态。

道具：

道具类似于方法参数。它们被传递到使用该组件的组件。
道具是一成不变的。它们是只读的。

请参阅以下示例以了解道具：

Person.js

import React from 'react';
class Person extends React.Component{
render(){
return(
<div>
<label>I am a {this.props.character} person.</label>
</div>
);
}
}
export default Person;
const person = <Person character = "good"></Person>

在上面的示例中，const person = <Person character = "good"></Person>我们将character = "good"prop 传递给Personcomponent。

它给出的输出是“我是一个好人”，事实上我是。

关于状态和道具还有很多要学习的东西。通过实际研究编码，可以学到很多东西。因此，通过编码使您的手变脏。

React高阶组件示例

在React中，高阶组件（HOC）是一个接受组件并返回新组件的函数。程序员使用HOC来实现组件逻辑的重用。

如果您使用过Redux's connect，那么您已经使用了高阶组件。

核心思想是：

const EnhancedComponent = enhance(WrappedComponent);

哪里：

enhance 是高阶组件；
WrappedComponent是您要增强的组件；和
EnhancedComponent 是创建的新组件。

这可能是enhanceHOC 的主体：

function enhance(WrappedComponent) {
return class extends React.Component {
render() {
const extraProp = 'This is an injected prop!';
return (
<div className="Wrapper">
<WrappedComponent
{...this.props}
extraProp={extraProp}
/>
</div>
);
}
}}

在这种情况下，enhance返回一个extends 的匿名类React.Component。这个新组件正在做三件简单的事情：

WrappedComponent在div元素内渲染；
将自己的道具传给了WrappedComponent; 和
注入额外的道具WrappedComponent。

HOC只是一种使用React的组合性质的模式。它们向组件添加功能。您可以使用它们做更多的事情！

2023-03-22 10:04:19

新人小程序+APP定制199元起

发放福利，助力中小企业发展，真正在互联网中受益

点击询问定制

广告服务展示