반응은 어떻게 작동하나요? 처음부터 리액트 케이스를 만드는 전 과정

이 글에서는 주로 react 케이스를 처음부터 만드는 세부 단계에 대해 설명합니다. 글의 구체적인 내용을 살펴보겠습니다

설명 예시

다음으로 간단한 사례를 통해 React의 내용을 자세히 배워보겠습니다

위 그림과 같이 버튼이 2개 있는데, 플러스 버튼을 클릭하면 숫자가 입니다. 더하기 1, 빼기 버튼을 클릭하면 숫자는 빼기 1이 됩니다

코드 구조

create-react-app를 사용하여 프로젝트를 만들고 코드 구조를 가장 간단한 모드로 줄이세요create-react-app创建一个工程，将其中的代码结构删减到最简单的模式

修改index.js

index.js中的代码就很简单了，只要引入App组件，执行渲染即可

import React from &#39;react&#39;;import ReactDOM from &#39;react-dom&#39;;import App from &#39;./components/App&#39;ReactDOM.render(<App/>, document.getElementById(&#39;root&#39;));

组件的基本内容

App.js中的内容才是我们要真正实现的逻辑,我们将使用ES6的方式创建一个React的组件，步骤如下

1. 引入react

import React from 'react'

2.创建组件，并让组件继承React.Component,同时实现render函数

class App extends React.Component{
    render(){        return (
            <p>
            </p>
        )
    }
}

3.为组件指定默认输出

export default App

完整代码如下：

import React from 'react';class App extends React.Component{
    render(){        return (
            <p>
            </p>
        )
    }
}
export default App;

• React.Component是react的一个抽象基类，单独引用它毫无意义，我们通常用其来实现子类，实现子类的时候必须要实现其render函数

• render函数的所用是返回组件的内容，而渲染的过程是有 react框架来完成的，在return()中只能有一个顶级的标签元素

• export default指定了当前组件输出的默认模块

功能实现

范例中的内容可分为四个部分

1.加号按钮
 2.减号按钮
 3.简单文本
 4.鼠标点击按钮变化的数字

其中按钮和文本都非常简单，但是数字需要鼠标点击进行改变的，假如我们没有学习过任何的前端框架，我们就要使用document对象，获取页面的内容，然后将其装换为数字，再对数字进行计划，然后将计算结果写入页面。而使用react来实现，我们需要知道，react的核心目标 组件化，组件中可变换的内容称之为状态（想看更多就到PHP中文网React参考手册栏目中学习）

组件中的数据来源有两种，内部声明和外部传入，分别用state和prop进行区别和表示，在es6组件中，可以通过constructor构造函数中接收外部传来的prop和声明内部使用的状态数据，在本文的范例中，我们需要用到一个在鼠标点击后不断变化的数字

constructor(props){
    super(props);
    this.state = {
        count:0
    }}

我们已经声明了内部状态，并接收了外部传入的数组，下面我实现页面的展示内容,即实现render函数中的内容

    render(){
        return (            <p>
                <button>+</button>
                <button>+</button>
                <span>当前点击次数</span>
                <span>{this.state.count}</span>
            </p>
        )
    }

渲染效果如图1-3所示

内容美化

从页面效果来看，各个元素紧靠在一起，不太好看，我们通过简单的css对其进行美化，要达到的目标是：
- 整个内容增加上边距和左边距
- 按钮、文本、数字相互之间有一定的间距

在react中，使用css的方式与传统的方式有不同的地方
- 引入外部样式文件
新建style/App.css

.box{    margin-left: 50px;    margin-top: 50px;}.box *{    margin:auto 5px;}

在App.js引入这个css文件

import '../style/App.css'

在这里要值得注意的是，在react中，class属性要写成className，因为class是 JavaScript 的保留字

    render(){
        return (            <p className="box">
                <button>+</button>
                <button>-</button>
                <span>当前点击次数</span>
                <span>{this.state.count}</span>
            </p>
        )
    }

• 使用JavaScript对象来声明样式

    render(){
        const style={
            marginLeft:'50px',
            marginTop:'50px'
        }
        const item = {
            margin:'auto 5px'
        }
        return (            <p style={style}>
                <button style={item}>+</button>
                <button style={item}>-</button>
                <span style={item}>当前点击次数</span>
                <span style={item}>{this.state.count}</span>
            </p>
        )
    }

运行效果与图1-4一样

使用对象声明样式时，要使用camelCase색인을 수정하세요. js

index.js의 코드는 매우 간단합니다. App 컴포넌트를 소개하고 렌더링만 하면 됩니다

    render(){
        return (            <p style={{marginLeft:&#39;50px&#39;,marginTop:&#39;50px&#39;}}>
                <button style={{margin:&#39;auto 5px&#39;}}>+</button>
                <button style={{margin:&#39;auto 5px&#39;}}>-</button>
                <span style={{margin:&#39;auto 5px&#39;}}>当前点击次数</span>
                <span style={{margin:&#39;auto 5px&#39;}}>{this.state.count}</span>
            </p>
        )
    }

• 컴포넌트의 기본 내용
  App.js의 내용. code>는 우리가 실제로 구현하려는 로직으로, ES6를 사용하여 React 컴포넌트를 생성할 것입니다. 단계는 다음과 같습니다

react 소개

import React from 'react';
import '../style/App.css'class App extends React.Component{

    constructor(props){        super(props);        this.state = {            count:0
        }        this.increment = this.increment.bind(this);        this.decrement = this.decrement.bind(this);
    }
   increment(){        this.setState({count:this.state.count+1})
    }
    decrement(){        this.setState({count:this.state.count-1})
    }
    render(){        return (
            

                +
                -
                当前点击次数
                {this.state.count}
            
        )
    }
}
export default App;

2.컴포넌트를 생성하고, 해당 컴포넌트가 React.Component를 상속하도록 하고, 렌더링 기능을 구현합니다

import React from 'react';
import '../style/App.css'class App extends React.Component{
    constructor(props){        super(props);        this.state = {            count:0
        }
    }
    increment  = () => {        this.setState({count:this.state.count+1})
    }
    decrement = () => {        this.setState({count:this.state.count-1})
    }
    render(){        return (
            

                +
                -
                当前点击次数
                {this.state.count}
            
        )
    }
}

export default App;

3.컴포넌트의 기본 출력을 지정합니다

🎜

ReactDOM.render(<App name="当前点击次数"/>, document.getElementById(&#39;root&#39;));

🎜완전합니다. 🎜

    render(){
        return (            <p className="box">
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
                <span>{this.props.name}</span>
                <span>{this.state.count}</span>
            </p>
        )
    }

🎜🎜🎜React.Component는 React의 추상 기본 클래스입니다. 우리는 일반적으로 하위 클래스를 구현할 때 이를 사용합니다. 렌더링 함수 구현🎜🎜🎜🎜render 함수 구성 요소의 콘텐츠를 반환하는 데 사용되며, 렌더링 프로세스는 반응 프레임워크에 의해 완료됩니다. return()에는 최상위 태그 요소가 하나만 있을 수 있습니다. 🎜🎜🎜🎜export default code>는 현재 구성요소의 기본 모듈 출력을 지정합니다🎜🎜🎜🎜함수 구현🎜🎜예제의 내용은 네 부분으로 나눌 수 있습니다🎜🎜🎜 1. 플러스 버튼🎜 2.마이너스 버튼 🎜 3. 간단한 텍스트 🎜 4. 마우스로 버튼을 클릭하면 바뀌는 숫자🎜🎜🎜버튼과 텍스트는 매우 간단하지만, 프론트엔드 프레임워크를 전혀 배우지 않았다면 마우스를 클릭하여 숫자를 변경해야 합니다. 문서 객체를 사용하여 페이지의 내용을 가져온 다음 이를 숫자로 변환하고 숫자를 계산한 다음 계산 결과를 페이지에 씁니다. React를 사용하여 구현할 때 React의 핵심 목표는 컴포넌트화이고, 컴포넌트에서 변환 가능한 콘텐츠를 🎜state🎜라고 한다는 것을 알아야 합니다. (자세한 내용을 보려면 PHP 중국어 웹 사이트 React 참조 매뉴얼🎜칼럼에서 알아보세요)🎜🎜컴포넌트에는 두 가지 데이터 소스, 🎜🎜내부 선언🎜🎜과 🎜🎜외부 수신🎜 🎜은 각각 state와 prop으로 구별되어 표현됩니다. es6 컴포넌트에서는 외부에서 prop을 받고 constructor 생성자를 통해 내부적으로 사용되는 상태 데이터를 선언할 수 있습니다. 이 글의 예에서는 마우스를 클릭한 후 계속해서 변하는 숫자를 사용해야 합니다🎜rrreee🎜내부 상태를 선언하고 외부에서 들어오는 배열을 받았습니다. 이제 페이지의 표시 내용, 즉 렌더링 기능의 콘텐츠🎜rrreee🎜 🎜🎜렌더링 효과 그림 1-3과 같이🎜🎜콘텐츠 미화🎜🎜페이지 효과에서 다양한 요소들이 서로 붙어있어 보기에 좋지 않습니다. 간단한 CSS를 통해 미화합니다. 목표는 달성한 점은 다음과 같습니다. 🎜- 전체 콘텐츠 상단 및 왼쪽 여백을 늘립니다. 🎜- 버튼, 텍스트, 숫자 사이에 일정한 간격이 있습니다. 🎜🎜 이에 대응하여 CSS를 사용하는 방식은 기존 방식과 다릅니다 🎜 - 외부 스타일 파일을 도입합니다. 🎜 새로운 스타일 /App.css를 생성하세요🎜rrreee🎜App.js에 이 CSS 파일을 소개하세요🎜rrreee🎜 여기서 주목해야 할 점은 반응 시 클래스 속성은 className으로 작성되어야 한다는 점입니다. 는 JavaScript🎜rrreee🎜의 예약어입니다. 🎜🎜🎜🎜 JavaScript 객체를 사용하여 스타일 선언🎜🎜🎜rrreee🎜작업 효과는 그림 1-4와 같습니다🎜🎜🎜객체를 사용하여 스타일을 선언할 때는 camelCase를 사용하세요. , 즉 🎜🎜CamelCase 명명법🎜🎜🎜 🎜🎜🎜🎜스타일 개체를 html🎜🎜🎜rrreee🎜에 직접 작성하세요. 스타일 속성의 콘텐츠가 두 개의 중괄호 레이어를 사용하고 바깥쪽 중괄호는 🎜🎜React 표현식입니다. 🎜🎜 및 내부 중괄호는 🎜🎜JavaScript 개체🎜🎜🎜🎜위의 세 가지 CSS 작성 방법은 동일한 효과를 갖습니다. 다음 예에서는 코드를 간단하고 직관적으로 만들기 위해 도입하는 방법을 소개합니다. 외부 CSS 파일이 채택되었습니다🎜

按钮事件

接下来为两个按钮增加点击事件，react中的点击事件为onClick，它与html中的onclick有一些区别，在这里不进行详细描述。我们为加号按钮增加事件处理函数increment，为减号增加事件处理函数decrement。在increment,让state中的count的值加1,在decrement中，让state中count的值减1

注意点：

事件函数绑定this
 修改state的方式

import React from 'react';
import '../style/App.css'class App extends React.Component{

    constructor(props){        super(props);        this.state = {            count:0
        }        this.increment = this.increment.bind(this);        this.decrement = this.decrement.bind(this);
    }
   increment(){        this.setState({count:this.state.count+1})
    }
    decrement(){        this.setState({count:this.state.count-1})
    }
    render(){        return (
            

                +
                -
                当前点击次数
                {this.state.count}
            
        )
    }
}
export default App;

• 修改state中的数据，要调用setState函数来进行设置

• 定义普通的的函数来处理事件，需要在构造函数中与this进行绑定，否则在函数内部，this为undefined

此时我们在页面点击按钮，就能看到效果了

让绑定this的方式完美一些

在上面的代码中，我们可以看到，事件处理函数要在构造函数中调用bind函数来绑定this，在这里我们只有两个函数，在复杂引用中可能有更多的函数，要是每一个函数都要这么绑定一次，对于有强迫症或者洁癖的开发人员来说是一件非常闹心且痛苦的事情。因此我们要使用更加简洁的方式

请看代码

import React from 'react';
import '../style/App.css'class App extends React.Component{
    constructor(props){        super(props);        this.state = {            count:0
        }
    }
    increment  = () => {        this.setState({count:this.state.count+1})
    }
    decrement = () => {        this.setState({count:this.state.count-1})
    }
    render(){        return (
            

                +
                -
                当前点击次数
                {this.state.count}
            
        )
    }
}

export default App;

点击按钮效果完全一样，整个世界都干净了！

从外部传入数据

在前面我们说到，props是用来从外部传递数据的，那么它是如何传递的呢？

在index.js中我们为App标签添加属性name

ReactDOM.render(<App name="当前点击次数"/>, document.getElementById(&#39;root&#39;));

然后修改App.js中的render函数

    render(){
        return (            <p className="box">
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
                <span>{this.props.name}</span>
                <span>{this.state.count}</span>
            </p>
        )
    }

运行效果与之前是一样的！

到这里呢，这个简单而又覆盖到react的大部分内容的范例就说完了！上手试试，其实很简单的！

本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。

위 내용은 반응은 어떻게 작동하나요? 처음부터 리액트 케이스를 만드는 전 과정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!