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 구성 요소를 작성하는 일반적인 방법이지만 위 코드를 관찰하면 몇 가지 흥미로운 점을 찾을 수도 있습니다.

MyFirstComponent에 컴포넌트 라이프사이클 후크 함수인 comComponentDidMount 함수가 있습니다. 실제로 React는 컴포넌트

에 대한 일련의 라이프 사이클 후크 함수를 설계했습니다. MyFirstComponent에 render() /code>, 이 함수는 <code>html과 유사한 템플릿 콘텐츠 jsx를 반환 값으로 사용합니다. 이는 정의해야 하는 함수입니다. 그렇지 않으면 React에서 오류가 발생합니다

jsx 얼핏 보면 이렇게 보입니다. 템플릿 엔진은 실제로 JavaScript의 구문 확장입니다. 핵심 개념은 완전히 JavaScript를 기반으로 하는 유명한 all in js입니다. code>는 기존 템플릿 엔진과 마찬가지로 js 표현식 #🎜🎜#

#🎜🎜#jsx바인딩된 데이터를 바인딩할 수도 있습니다. 두 개체인 this.state와 this.props에서 나온 것으로 명확하게 볼 수 있습니다. this.state는 MyFirstComponent입니다. >의 내부 사용자 정의 구성요소 상태; this.props는 참조 #🎜🎜#를 전달한 함수와 유사하게 레이블 속성 형식으로 MyFirstComponent에 전달된 외부 데이터입니다.

#🎜🎜# 요약하자면, #🎜🎜# 컴포넌트 라이프사이클을 마스터하면 #🎜🎜# #🎜🎜#JSX#🎜🎜# #🎜🎜# 컴포넌트 상태 state#🎜🎜# #🎜🎜#Component attribute props#🎜🎜# React 컴포넌트를 작성하는 방법을 알게 될 것입니다. #🎜🎜##🎜🎜##🎜🎜#컴포넌트 수명주기#🎜🎜##🎜🎜##🎜🎜#공식 문서에는 매우 자세한 소개가 있으므로 여기서는 자세히 다루지 않겠습니다. 공식 구성요소 수명주기 문서를 확인하세요. #🎜🎜##🎜🎜##🎜🎜#JSX#🎜🎜##🎜🎜##🎜🎜#JSX에서 javaScript 표현식을 마음대로 사용할 수 있습니다. JSX에서는 중괄호로 묶어야 합니다.
예를 들어 다음 코드는 #🎜🎜#rrreee#🎜🎜#p와 같은 JSX의 React 요소는 결국 다음으로 번역됩니다. 일부 특정 함수는 가벼운 javascript 객체로 처리됩니다. 예를 들어 위에서 언급한 p 요소는 결국 다음과 같은 객체가 됩니다. #🎜🎜#rrreee#🎜🎜#React는 이러한 객체 DOM을 읽어 를 작동합니다 code>데이터 내용을 일관되게 유지합니다. 따라서 실제로는 여전히 <code>js를 작성하고 있습니다. 따라서 class와 style은 js와 동일하게 작성해야 합니다.
예: class => className
또 다른 예: font-size: 20px; => {fontSize: "20px" }# 🎜🎜## 🎜🎜#특히 React 요소의 속성은 여전히 ​​따옴표를 사용하여 기본 html과 같은 문자열 값으로 속성을 정의할 수 있습니다. 예: className="my-claname "#🎜🎜##🎜🎜#위의 내용 외에도 JSX의 이벤트 바인딩에는 기본 html과 몇 가지 구문 차이가 있습니다. #🎜 🎜#

• #🎜🎜#React의 이벤트 이름은 소문자 대신 카멜 케이스로 작성됩니다. #🎜🎜#
• #🎜🎜#React 이벤트 바인딩은 문자열이 아닌 함수 객체여야 합니다. #🎜🎜#

#🎜🎜#코드 예: #🎜🎜#rrreee#🎜🎜##🎜🎜#구성 요소 상태 상태#🎜🎜##🎜🎜##🎜🎜# state는 비공개이며 현재 구성 요소에 의해 완전히 제어됩니다. 상태이므로 업데이트가 필요합니다. 어떻게 업데이트하나요?
코드 예: #🎜🎜#rrreee#🎜🎜#setState()는 React에서 구성 요소를 동적으로 업데이트하는 유일한 방법입니다. 호출되면 자체 구성 요소가 업데이트됩니다. 모든 하위 구성요소는 모두 재렌더링을 트리거합니다.
특히 state는 하위 구성요소에 속성으로 전달될 수도 있습니다.
setState() 자세한 문서#🎜🎜 ##🎜🎜##🎜🎜#Component 속성 props#🎜🎜##🎜🎜##🎜🎜#props는 상위 구성 요소에 의해 전달되는 데이터이며 일반적으로 상위 구성 요소의 상태또는 구성 요소의 다른 멤버 변수입니다. 또한 #🎜🎜#props는 읽기 전용이며 구성 요소는 자체 props#🎜🎜#을 수정할 수 없습니다. 상위 구성 요소가 setState()를 호출한 후에만 하위 구성 요소의 속성을 변경하고 다시 렌더링할 수 있습니다.
props는 위에서 아래로만 전달될 수 있으며 구성 요소는 자신의 비공개 상태만 수정할 수 있습니다. 즉, 전체 애플리케이션의 데이터 흐름은 be #🎜🎜 #위에서 아래로의 단방향 데이터 흐름#🎜🎜##🎜🎜##🎜🎜##🎜🎜#Summary#🎜🎜##🎜🎜#

컴포넌트 수명 주기 JSX 컴포넌트 상태 상태 컴포넌트 속성 props 하향식 단방향 데이터 흐름과 결합된 이는 React 컴포넌트의 가장 기본적인 기능입니다!

관련 권장 사항:

React 고차 구성 요소를 사용하는 방법

React 구성 요소에서 이를 사용하는 방법

위 내용은 React 구성 요소를 작성하는 방법은 무엇입니까? (암호)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!