반응 초보 수기

HelloWorld
먼저 React 의 세 개의 js 의존 패 키 지 를 도입 해 야 합 니 다. 구체 적 으로 다음 과 같 습 니 다.


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <script type="text/javascript" src="../js/react.js" >script>
        <script type="text/javascript" src="../js/react-dom.js" >script>
        <script type="text/javascript" src="../js/browser.min.js" >script>
    head>
    <body>
        <div id="demo">div>
        <script type="text/babel">
            ReactDOM.render(
                {/*  demo*/}
                Hello,World</h1>,
                document.getElementById('demo')
            )
        script>
    body>
html>

마지막 탭 의 type 값 text/babel 을 주의 하 십시오. 이 속성 성명 은 자바 script 이 아 닌 React 의 JSX 문법 을 사용 하 는 것 을 간단하게 이해 할 수 있 습 니 다. 가끔 은 type 의 값 text/jsx 을 다른 곳 에서 볼 수 있 습 니 다. 이 는 babel 이 es6 문법 을 사용 할 수 있 는 것 과 차이 가 있 습 니 다. 그러면 JSX 는 무엇 입 니까?쉽게 말 하면 JSX 가 위 에 있 는 {/* demo*/} 을 만 났 을 때 이해 하기 쉬 운 것 이 바로 JavaScript 의 주석 입 니 다.
배열 처리
jsx 는 자동 으로 배열 의 요 소 를 전개 합 니 다.

var arr=[1,2,3];
var arr2=[
        <p>p1p>,
        <p>p2p>,
    ]
ReactDOM.render(
    <div>{arr}{arr2}div>,
    document.getElementById('demo')
)

구성 요소React.createClass 방법 은 구성 요소 클래스 를 만 드 는 데 사 용 됩 니 다. 이니셜 은 대문자 로 맨 위 에 있 는 탭 만 있 을 수 있 습 니 다.

return Hello {this.props.name}
sth

속성 을 추가 할 때 class 는 className, for 는 html For 로 써 야 합 니 다. class 와 for 는 JavaScript 의 키워드 이기 때 문 입 니 다.

var Msg=React.createClass({
    render:function () {
        return this.props.class}>Hello {this.props.name}

    }
});
ReactDOM.render(
    "peter" class="red"/>,
    document.getElementById('demo')
)

위의 코드 에 this.props 가 있 는 것 을 볼 수 있 습 니 다. 구성 요소 에 전달 하 는 매개 변 수 는 사용 this.props 에서 얻 을 수 있 습 니 다.
복합 구성 요소
직접 코드

var Component1 = React.createClass({
  render: function() {
    return (
      {this.props.prop1}
    );
  }
});

var Component2 = React.createClass({
  render: function() {
    return (
      {this.props.prop2}
    );
  }
});

var Final = React.createClass({
  render: function() {
    return (
      
        this.props.prop1} />
        this.props.prop2} />
      
    );
  }
});

ReactDOM.render(
  "one" prop2="two" />,
  document.getElementById('demo')
);

props
위 에 서 는 props 가 구성 요소 에 사용자 정의 파 라 메 터 를 전달 할 수 있다 는 것 을 알 고 있 습 니 다. 다음은 다른 props 에 관 한 지식 을 소개 합 니 다. 기본 props 는 getDefaultProps 구성 요소 의 기본 속성 값 을 설정 합 니 다. 사용자 정의 속성 이 기본 속성 과 같 을 때 사용자 정의 속성 을 사용 합 니 다. - proptypes proptypes 는 구성 요소 에 전 달 된 매개 변수 가 요구 에 부합 되 는 지 검증 할 수 있 습 니 다.구성 요소 가 어떤 양 을 받 아야 하 는 지 정의 하 는 매개 변수 형식 이 라 고도 할 수 있다.

var Demo=React.createClass({
getDefaultProps:function(){
    return{
        myName:'defaultName'
    }
},
propTypes:{
    title:React.PropTypes.string.isRequired
},
render:function () {
    return this.props.title} name={this.props.myName}>{this.props.innerHtml}
}
});

var data='124';
ReactDOM.render(
    "demoText" myName='myName'/>,
    document.getElementById('demo')
)

위의 demo 는 문자열 형식의 title 속성 을 원 합 니 다. 형식 이 잘못 되 거나 title 속성 (isRequired 필수) 이 없 으 면 React 는 콘 솔 에서 경 고 를 하지만 코드 는 실행 할 수 있 습 니 다.최종 span 의 name 값 은 my Name 입 니 다.
state this.props 는 고정된 매개 변 수 를 나타 내 고 this.state 은 사용자 와 상호작용 을 해 야 한다.그러면 기본 props 가 있 는 이상 기본 state getInitialState 도 빠 질 수 없습니다. 돌아 오 는 대상 은 this. state 를 통 해 얻 을 수 있 습 니 다.this.setState 를 통 해 state 를 수정 할 수 있 으 며, 수정 후 this. render 방법 으로 페이지 를 다시 렌 더 링 할 수 있 습 니 다.

var State=React.createClass({
    getInitialState:function(){
        return {flag:false};
    },
    handleClick:function(){
        this.setState(
                {
                    flag:!this.state.flag
                }
        );
    },
    render:function(){
        var innerHtml=this.state.flag?'true':'false';
        return (
            
                {innerHtml}
                
            
        );
    }
});
ReactDOM.render(
    ,
    document.getElementById('demo')
)

리 얼 DOM
실제 DOM 을 가 져 오 려 면 탭 에 ref 속성 을 추가 해 야 this. refs. [ref 값] 을 가 져 올 수 있 습 니 다. 이 동작 은 DOM 이 삽 입 된 후에 야 실제 DOM 을 가 져 올 수 있 습 니 다.

var RealDOM=React.createClass({
    handleClick:function(){
        console.log(this.refs.myInput.value);
    },
    render:function(){
        return (
            
                "text" ref="myInput" /> 
                "button" value="input    " onClick={this.handleClick} />
            
        );
    }
});

ReactDOM.render(
    ,
    document.getElementById('demo')
)

이런 방식 을 제외 하고 우 리 는 findDOMNode() 방법 으로 DOM 노드 를 얻어 DOM 작업 을 할 수 있다.이 방법 은 DOM 이 삽 입 된 후에 야 실제 DOM 을 얻 을 수 있다.
양식
양식 은 일반적으로 사용자 와 상호작용 을 해 야 하기 때문에 this.state 을 사용 하여 조작 해 야 한다.

var Form=React.createClass({
    getInitialState:function(){
        return {value:'initForm'}
    },
    handleChange:function(e){
        this.setState({
            value:e.target.value
        })
    },
    render:function(){
        var value=this.state.value;
        return(
            
                this.handleChange} value={value}/>
                {value}
            
        )
    }
})
ReactDOM.render(
    ,
    document.getElementById('demo')
)

AJAX
이 곳 은 jQuery 의 ajax 로 처리 합 니 다. 물론 다른 ajax 방식 으로 도 가능 합 니 다. componentDidMount 구성 요소 가 DOM 에 삽입 되 어 실 행 됩 니 다.

var AjaxDemo=React.createClass({
    getInitialState:function () {
        return {
            name:'',
            age:''
        }
    },
    componentDidMount:function(){
        $.get(this.props.url,function (res) {
            var name=res.name;
            if(this.isMounted()){
                this.setState({
                    name:'peter',
                    age:18
                });
            }
        }.bind(this));
    },
    render:function () {
        return(
            
                Name:{this.state.name}
                age:{this.state.age}
            
        )
    }
});
ReactDOM.render(
    'demo11.json'/>,
    document.getElementById('demo')
)

demo 11. json 내용 은 다음 과 같 습 니 다.

{
    "name":"peter",
    "age":"18"
}

구성 요소 의 생명주기
위 에서 사용 하 는 componentDidMount 은 바로 생명주기 의 방법 중의 하나 이다.
구성 요소 의 수명 주 기 는 세 가지 상태 로 나 눌 수 있 습 니 다. - Mounting: 실제 DOM - Updating 이 삽입 되 었 습 니 다. 다시 렌 더 링 되 고 있 습 니 다. - Unmounting: 실제 DOM 이 이동 되 었 습 니 다.
라 이 프 사이클 방법 은: - componentWillMount (): 첫 렌 더 링 을 완료 하기 전에 호출 합 니 다. 이 때 는 구성 요소 의 state 를 수정 할 수 있 습 니 다. -componentDidMount (): 첫 렌 더 링 을 마 친 후 호출 합 니 다.다른 자 바스 크 립 트 프레임 워 크 와 함께 사용 하려 면 이 방법 에서 setTimeout, setInterval 을 호출 하거나 AJAX 요청 등 을 보 낼 수 있 습 니 다 (이부 조작 차단 방지 UI).componentWillUpdate (object nextProps, object nextState): 다시 렌 더 링 (render) 하기 전에 호출 합 니 다. 이 때 props 나 state 를 업데이트 할 수 없습니다. -componentDidUpdate (object prevProps, object prevstate): 렌 더 링 종료 호출 - componentWillUnmount (): DOM 을 옮 기기 전에 호출 - componentWillReceiveProps (object nextProps): 구성 요소 가 새로운 인 자 를 받 았 을 때 호출 - shouldComponentUpdate (object nextProps, object nextState): 구성 요소 가 새로운 props 나 state 를 렌 더 링 해 야 하 는 지,보통 사용 할 필요 가 없다.

var Lifecycle=React.createClass({
    getInitialState:function () {
        return {
            fontSize:10
        };
    },
    componentDidMount:function(){
        this.timer=setInterval(function () {
            var fontSize=this.state.fontSize;
            fontSize+=2;
            if(fontSize>30){
                fontSize=10;
            }
            this.setState({
                fontSize:fontSize
            });
        }.bind(this),1000);
    },
    render:function () {
        return (
            this.state.fontSize}}>
                {this.props.name}
            
        )
    }
});
ReactDOM.render(
    "lifecycle"/>,
    document.getElementById('demo')
)

학습 문장 주소
React 입문 실례 강좌
리 액 트 튜 토리 얼

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Thymeleaf 의 일반 양식 제출 과 AJAX 제출

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

반응 초보 수기

Hello,World</h1>, document.getElementById('demo') )

Hello {this.props.name}

this.props.class}>Hello {this.props.name}

{this.props.prop1}

좋은 웹페이지 즐겨찾기