React加载事件的方法

最新推荐文章于 2025-04-19 02:53:58 发布

原创最新推荐文章于 2025-04-19 02:53:58 发布 · 8.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#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()

componentWillMount会在组件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
                });
            }
        })
    }