집 > 기사 > 웹 프론트엔드 > React의 기본 구문은 무엇입니까? 반응의 기본 구문 소개(예제 포함)

React의 기본 구문은 무엇입니까? 반응의 기본 구문 소개(예제 포함)

寻∝梦원래의: 2018-09-11 14:32:031735검색

이 글에서는 주로 react의 기본 구문을 소개하고, State와 Props의 초기화 방법에 대한 자세한 설명을 함께 살펴보겠습니다.# 🎜🎜## 🎜🎜#React 기본 구문

1.React란 무엇입니까

2.리액트 컴포넌트
3 주 및 발의안
4 React 구성 요소 수명 주기

1, React

React는 사용자 인터페이스 구축을 위한 JAVASCRIPT 라이브러리입니다.

React는 주로 UI를 구축하는 데 사용됩니다. 많은 사람들은 React가 MVC의 V(뷰)라고 생각합니다.
React는 Facebook의 내부 프로젝트로 시작되었으며 Instagram 웹사이트를 구축하는 데 사용되었으며 2013년 5월에 오픈 소스로 공개되었습니다.
React는 높은 성능과 매우 간단한 코드 로직을 가지고 있으며 점점 더 많은 사람들이 이에 주목하고 사용하기 시작했습니다.

React는 일반 JavaScript 대신 JSX를 사용합니다. JSX는 XML과 매우 유사한 JavaScript 구문 확장입니다.

Note

#🎜 🎜# 속성은 첫 번째 단어의 첫 글자는 소문자이고 다른 대문자는
으로 시작합니다. HTML 태그는 JSX로 작성해야 하며, 카멜 표기법으로만 작성하는 것이 효과적입니다.
JSX를 지원하려면 WebStrom의 javascript를 JSX Harmony로 설정해야 합니다
#🎜 🎜#React 기능:

2. 효율성 -React는 DOM을 시뮬레이션하여 DOM과의 상호 작용을 최소화합니다.

3. 유연성 -React는 알려진 라이브러리 또는 프레임워크와 잘 작동합니다.
4.JSX - JSX는 JavaScript 구문의 확장입니다. React 개발이 반드시 JSX를 사용할 필요는 없지만 권장합니다.
5. 컴포넌트 - React를 통해 컴포넌트를 구축하면 코드 재사용이 더 쉬워지고 대규모 프로젝트 개발에 잘 적용될 수 있습니다.
6. 단방향 응답 데이터 흐름 - React는 단방향 응답 데이터 흐름을 구현하여 중복 코드를 줄이므로 기존 데이터 바인딩보다 간단합니다.

2. React 컴포넌트의 두 가지 구현 방법과 차이점
React는 사용자 인터페이스를 구축하는 데 사용되는 JAVASCRIPT 라이브러리이므로 먼저 js 파일 3개를 인용하고, 다운로드하여 로컬에서 참조할 수도 있습니다.

82009ba41b15f51705420ba40a538ee32cacc6d41bbb37262a98f745aa00fbf0
abfd62c5aa399bcfd7beb6308b55f1ce2cacc6d41bbb37262a98f745aa00fbf0
726647b8f4ec8af879e4a70f56dccdd12cacc6d41bbb37262a98f745aa00fbf0
9fd01892b579bba0c343404bcccd70fb
93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    b2386ffb911b14667cb8f0f91ea547a7Title6e916e0f7d1e588d4f442bf645aedb2f
    7682b9a3d08eed176a4308470f476c472cacc6d41bbb37262a98f745aa00fbf0
    a8b6889a40c49db76102831f2183fd612cacc6d41bbb37262a98f745aa00fbf0
    a8a634993edeeb9b1cd75e43ca00a5762cacc6d41bbb37262a98f745aa00fbf0
    d87a8a64ee2bbb5de77d915dd08e24cd2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
803c97d8346ca6b8da89108d684ef6bb94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

 react.min.js - React 的核心库
react-dom.min.js - 提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执
 行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）
一同使用可以让源码的语法渲染上升到一个全新的水平。

2.1 방법 1:

class MyTextView extends React.Component{
    render(){
        return e388a4556c0f65e1904146cc1a846beehello react94b3e26ee717c64999d7867364b1b4a3;
    }
}
//组件渲染到DOM中  
ReactDOM.render(a4d1e0120195a60a9692a1c120c95952054fb429a2d2fb32ca4dca4607c66fb6,document.body);

은 React.Componet

#🎜을 상속받아야 합니다. 🎜#

render() 렌더링 기능이 필요합니다
>특별한 규칙이 있는 가상 DOM을 생성하는 데 필요한 방법: # 🎜🎜#1. 데이터는 this.props 및 this.state
2를 통해서만 액세스할 수 있습니다. null, false 또는 모든 React 구성 요소
3을 반환할 수 있습니다. 🎜# 4. DOM의 출력은 수정할 수 없습니다. 객체 및 구조 할당과 같은 메서드 및 속성 render
이 메서드를 사용하여 구성 요소의 선언 주기 기능을 실행합니다. 그런 다음 구성 요소의 상태 및 소품 속성에 액세스할 수 있습니다.

State 및 Props

State는 주로 인터페이스를 업데이트하는 데 사용됩니다. 구성 요소의 State 속성은 다음에서 초기화됩니다. 수명주기 함수 getInitialState. 상태를 변경하기 위해 구성 요소의 this.setState가 호출되면 구성 요소가 다시 렌더링되고 새로 고쳐집니다.

Props는 주로 컴포넌트 간 데이터 전송에 사용됩니다. 즉, 레이블의 pname 속성은 MyText의 this.props.pname을 통해 얻을 수 있습니다

var MyTexTiew2  = React.createClass(
    {
        render:function () {
            return  e388a4556c0f65e1904146cc1a846beehi react94b3e26ee717c64999d7867364b1b4a3;
        }
    }
    );
ReactDOM.render(53ce64b5f535a04a91cafbb0f9bb455339edcc07d374c8b1e032d2a6a06eb03c,document.body);

React 컴포넌트 수명 주기#🎜 🎜 #

인스턴스화

첫 번째 인스턴스화
getDefaultProps
getInitialState

렌더링

componentDidMount

인스턴스화가 완료된 후 업데이트
getInitialState
컴포넌트WillMount
렌더링

componentDidMount

존재 기간

컴포넌트가 이미 존재하는 경우 상태 변경

componentWillReceiveProps

shouldComponentUpdate
컴포넌트WillUpdate
렌더링
componentDidUpdate

파기 및 정리 기간

componentWillUnmount

라이프 사이클은 총 10가지의 API를 제공합니다.

1.getDefaultProps
컴포넌트 클래스에 대해 작동하며 한 번만 호출됩니다. 반환된 객체는 기본 props를 설정하는 데 사용됩니다. 인스턴스에서 공유됩니다.

2.getInitialState
컴포넌트의 인스턴스에 작용하며 인스턴스 생성 시 1회 호출되어 각 인스턴스의 상태를 초기화합니다. 이때 이.props에 액세스할 수 있습니다.

3.comComponentWillMount
첫 번째 렌더링이 완료되기 전에 호출되며, 이때에도 구성 요소의 상태를 수정할 수 있습니다. (자세한 내용을 보고 싶으시다면 PHP 중국어 홈페이지
React Reference Manual
컬럼으로 이동하여 학습하세요)

4.render
必选的方法，创建虚拟DOM，该方法具有特殊的规则：
只能通过this.props和this.state访问数据
可以返回null、false或任何React组件
只能出现一个顶级组件（不能返回数组）
不能改变组件的状态
不能修改DOM的输出

5.componentDidMount
真实的DOM被渲染出来后调用，在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM。
在服务端中，该方法不会被调用。

6.componentWillReceiveProps
组件接收到新的props时调用，并将其作为参数nextProps使用，此时可以更改组件props及state。

componentWillReceiveProps: function(nextProps) { 
        if (nextProps.bool) { 
            this.setState({ 
                bool: true 
            }); 
        } 
    }

7.shouldComponentUpdate
组件是否应当渲染新的props或state，返回false表示跳过后续的生命周期方法，通常不需要使用以避免出现bug。在出现应用的瓶颈时，可通过该方法进行适当的优化。
在首次渲染期间或者调用了forceUpdate方法后，该方法不会被调用

8.componentWillUpdate
接收到新的props或者state后，进行渲染之前调用，此时不允许更新props或state。

9.componentDidUpdate
完成渲染新的props或者state后调用，此时可以访问到新的DOM元素。

10.componentWillUnmount
组件被移除之前被调用，可以用于做一些清理工作，在componentDidMount方法中添加的所有任务都需要在该方法中撤销，比如创建的定时器或添加的事件监听器。

通过集成extends React.Component 给组件初始化不会执行getDefaultProps、getInitialState
只有通过以下方式给组件初始化state和props

1、state的初始化，通过构造函数

  //在构造函数中对状态赋初始值
    constructor(props){
        super(props);//第一步，这是必须的
        //不能调用state
        this.state = {//第二步，赋初始值
            time:0,
            on:false,
            log:[] //数组
        };
    }

2、props的初始化

class Button extends React.Component{
//静态属性，给属性赋默认值
static defaultProps = {
    onClick : null,
    className : '',
    text : '默认'
};

render(){
    return ef4946c73039c083200512dcbcc5f2b5{this.props.text}65281c5ac262bf6d81768915a4a77ac0;
}

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

위 내용은 React의 기본 구문은 무엇입니까? 반응의 기본 구문 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：React-Native에서 탐색을 만드는 방법은 무엇입니까? React-Native 내비게이션 바 제작 상세 내용 (전체 코드 첨부)다음 기사：React-Native에서 탐색을 만드는 방법은 무엇입니까? React-Native 내비게이션 바 제작 상세 내용 (전체 코드 첨부)