Reactコンポーネントはどのように書くのでしょうか? （コード）

この記事の内容は React コンポーネントの書き方についてです? （コード）、それは特定の参考値を必要としている友人がそれを参照できることを願っています。

React コンポーネントの書き方

React の世界では、通常、コンポーネントは class を使用して宣言されます。これは React.Component を継承する必要があります。
たとえば、次のコード: class来声明一个组件的，它必须继承自React.Component。
例如下面的代码：

// MyFirstComponent.jsx
class MyFirstComponent extends React.Component {
  state = {
    text: "Hello React"
  };

  /** 组件生命周期钩子函数：在组件挂载完成后立即被调用 */
  componentDidMount() {
    alert("组件挂载完成！");
  }

  render() {
    return (
      <p>{this.state.text}, I am {this.props.author}!</p>
    )
  }
}

export default MyFirstComponent;

// index.js
import MyFirstComponent from "MyFirstComponent";

/** 渲染结果：<p>Hello React, I am Shaye!</p> */
ReactDOM.render(<MyFirstComponent author="Shaye"></MyFirstComponent>, document.getElementById("app"));

以上就是一个常规的React组件编写方式，不过我们还可以通过观察上面的代码，发现几个有趣的地方：

1. MyFirstComponent中有一个函数componentDidMount是组件生命周期钩子函数。实际上React为组件设计了一系列的生命周期钩子函数

2. MyFirstComponent中有一个特别的函数render()，这个函数把类似html的模板内容jsx作为返回值。这是一个必须定义的函数，否则React将抛出错误

3. jsx乍看之下像是一种模板引擎，实际上是一种JavaScript的语法扩展，它的核心理念就是著名的all in js，它完全是在JavaScript内部实现的，它和传统的模板引擎一样，也可以绑定js表达式

4. jsx绑定的数据可以很明显地看出来自两个对象：this.state和this.props；this.state是MyFirstComponent内部自定义的组件状态；this.props是外部凭借标签属性的形式传进MyFirstComponent内部的数据，类似于函数的传参；

总结来说，当你掌握了   组件生命周期   JSX   组件状态state   组件属性props   ，你就知道该如何编写React组件了。

组件生命周期

官方文档已经有非常详尽的介绍，这里不再赘述，请点击这里查看组件生命周期的官方文档。

JSX

你可以任意地在JSX当中使用javaScript表达式，在JSX当中的表达式要包含在大括号里。
例如下面的代码：

<p className={this.state.clname} style={{ fontSize: "20px" }}>{this.state.content} forever</p>

JSX里的React元素，比如p，最终都会被编译器转译，被某些特定函数处理变成一个轻量的javascript object。比如上面提到的元素p最终会变成如下的object：

// 注意: 以下示例是简化过的（不代表在 React 源码中是这样）
const pElement = {
  type: "p",
  props: {
    // this.state.clname的值
    className: "love",
    style: {
      fontSize: "20px"
    },
    // "you"为this.state.content的值
    children: ["you", "forever"]
  }
}

React就是通过读取这些对象来操作DOM并保持数据内容一致。所以，实际上你依然在写js。所以，class和style必须使用在js中的写法
比如:class => className
再比如：font-size: 20px; => { fontSize: "20px" }

特别地，React元素的属性仍然可以像原生html一样使用引号来定义以字符串为值的属性，例如：className="my-claname"

除了以上所提，JSX的事件绑定与原生html也有一些语法上的不同：

• React的事件命名采用驼峰式写法，而不是小写。

• React事件绑定的必须是一个函数对象，不能是字符串。

代码示例：

<p onClick={this.handleClick}>我是一个按钮</p>

// 也可以向事件回调函数传递参数
<p onClick={(params) => this.handleClick(params)}>我是一个按钮</p>

组件状态state

state是私有的，完全受控于当前组件。既然是状态，那么就会有更新的需求，如何更新呢？
代码示例：

// 对`this.state`或者它的属性直接`=`赋值，将永远不会触发组件渲染，必须使用`setState()`

// 在组件的生命周期钩子函数中调用this.setState()
componentDidMount() {
  this.setState({
    content: "lalalala"
  })
}

// 在组件的自定义函数中调用this.setState()
handleClick = () => {
  this.setState({
    content: "uauauaua"
  })
}

setState()是React中唯一一个动态更新组件的途径，当它被调用之后，自身组件以它的所有子组件都将触发重渲染
特别地，state同样也可以作为属性传递给子组件；
setState()详细文档

组件属性props

props是父组件传递下来的数据，一般是来自父组件的state或者组件的其他成员变量。并且，props是只读的，组件永远无法修改自己的props。只有在父组件调用setState()之后才能使子组件的属性发生变化并重新渲染。
props只能从上往下传，组件也只能修改自身私有的staterrreeerrreee 上記は React コンポーネントを記述する従来の方法ですが、上記のコードを観察すると、いくつかの興味深いことがわかります:

1. MyFirstComponent には、コンポーネントのライフサイクルフック関数である関数 componentDidMount があります。実際、React はコンポーネント用の一連のライフサイクル フック関数を設計しました

2. MyFirstComponent には特別な関数 render() があります。関数 html と同様のテンプレート コンテンツ jsx を戻り値として使用します。これは定義する必要がある関数です。定義しないと React がエラーをスローします
3. jsx 一見するとテンプレートエンジンのように見えますが、しかし実際には、上記は JavaScript の構文拡張です。その中心的な概念は、有名な all in js であり、JavaScript 内に完全に実装されています。従来のテンプレート エンジンと同様に、js 式をバインドすることもできます🎜
4. 🎜jsxバインドされたデータは、2 つのオブジェクトから明確に確認できます: this .state および this.props; this.state は、MyFirstComponent ステータス内のカスタマイズされたコンポーネントです。 /code> は、関数パラメーターと同様に、タグ属性の形式で MyFirstComponent に渡される外部データです。🎜

🎜 要約すると、🎜コンポーネントのライフ サイクル🎜をマスターすると、 🎜JSX🎜 🎜コンポーネントの状態 state🎜 🎜コンポーネント属性 props🎜 、Reactコンポーネントの書き方がわかります。 🎜🎜🎜コンポーネントのライフサイクル🎜🎜🎜公式ドキュメントに非常に詳細な概要が記載されているため、ここでは詳しく説明しません。コンポーネントのライフサイクルの公式ドキュメントを参照するには、ここをクリックしてください。 🎜🎜🎜JSX🎜🎜🎜 JSX 内の javaScript 式は、括弧内のヘッダーに含める必要があります。
たとえば、次のコード: 🎜rrreee🎜p などの JSX 内の React 要素は、最終的にコンパイラによって変換され、特定の関数によって処理されます。軽量の JavaScript オブジェクト。たとえば、上記の要素 p は、最終的に次の object になります: 🎜rrreee🎜React は、これらのオブジェクトを読み取り、データ コンテンツを保持することで DOM を操作します。一貫性のある。つまり、実際にはまだ js を書いていることになります。したがって、class と style は、js と同じ方法で記述する必要があります。
例: class > => className
別の例: font-size: 20px; => { fontSize: "20px" } 🎜特に、React 要素の属性は引用符を使用して、ネイティブ html のような文字列値を持つ属性を定義できます。例: className="my-claname"🎜🎜上記の説明に加えて、JSX のイベント バインディングには、ネイティブ html といくつかの構文の違いもあります。 🎜

• 🎜React のイベント名は小文字ではなくキャメルケースで書かれます。 🎜
• 🎜React イベント バインディングは文字列ではなく関数オブジェクトである必要があります。 🎜

🎜コード例: 🎜rrreee🎜🎜コンポーネントの状態 state🎜🎜🎜state はプライベートであり、現在のコンポーネントによって完全に制御されます。ステータスなので更新する必要がありますが、どうやって更新するのでしょうか？
コード例: 🎜rrreee🎜setState() は、React でコンポーネントを動的に更新する唯一の方法です。これが呼び出されると、独自のコンポーネントとそのすべてのサブコンポーネントが再レンダリングをトリガーします。
特に、state はプロパティとしてサブコンポーネントに渡すこともできます。
setState()詳細なドキュメント🎜🎜🎜コンポーネント属性の小道具🎜🎜🎜 props は親コンポーネントから渡されるデータで、通常は親コンポーネントまたはコンポーネントの他のメンバー変数からの state です。さらに、🎜props は読み取り専用であり、コンポーネントは自身の props🎜 を変更することはできません。親コンポーネントが setState() を呼び出した後でのみ、子コンポーネントのプロパティを変更して再レンダリングできます。
props は上から下へのみ渡すことができ、コンポーネントは独自のプライベート state のみを変更できます。つまり、アプリケーション全体のデータ フローは、上から下への一方向のデータフロー🎜🎜🎜🎜概要🎜🎜

コンポーネントのライフサイクル JSX コンポーネントの状態state コンポーネントの属性props トップダウンの一方向データフローと組み合わせることで、これらはReactコンポーネントの最も基本的な機能です。

関連する推奨事項:

React の高次コンポーネントの使用方法

React コンポーネントでのこれの使用方法

以上がReactコンポーネントはどのように書くのでしょうか? （コード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。