React 이벤트 로드 방법

1822 단어 react
onload 이벤트
onload 시간은 페이지나 이미지 불러오기가 완료되면 바로 발생합니다.
문법
onload="SomeJavaScriptCode"

SomeJavaScriptCode는 이벤트가 발생할 때 실행되는 JavaScript
window.onload = function(){}
페이지 불러오기 완료 트리거 창에 이벤트 불러오기
window.onload =function(){
    show_person_name();
};
function show_person_name() {
    $.getJSON("../DATA/person_storage.json",function(data) {
        data["person"].forEach(function (list) {
            var person_name_html = "<li class='name'  " +
                "onclick='choose_person_name(" + '"' + list + '"' + ")' type='button'>" + list + "</li>" ;
            $("body").append(person_name_html);
        });
    });
}

모든 React 구성 요소는 불러올 때 특정한 생명 주기가 있고 그 동안 다른 방법이 실행됩니다.
구성 요소 로드:componentWillMount
componentWillMount()

componentWill Mount는 구성 요소render 이전에 실행되며, 영원히 한 번만 실행됩니다.
이 방법은 항상 한 번만 실행되기 때문에 setState 방법을 정의한 후에 페이지는 불러오기 전에 한 번만 업데이트됩니다.
구성 요소 로드:componentDidMount
componentDidMount()

이 방법은 구성 요소가 불러온 후에 즉시 실행됩니다.이때 이후 구성 요소는 대응하는 DOM 구조를 생성했고this를 통해 가능합니다.getDOMNode()를 사용하여 액세스합니다.
    componentDidMount: function ()
    {
        var self = this;
        $.ajax({
            url:"../DATA/person_storage.json",
            dataType:"json",
            async:true,
            success:function(data) {
                console.log(data.person);
                self.setState({
                    persons: data.person
                });
            }
        })
    }

좋은 웹페이지 즐겨찾기