【React】react.js快速入门（2）

原创已于 2024-10-14 09:47:10 修改 · 353 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#react #reactjs #入门

于 2017-01-03 16:35:57 首次发布

Vue_Angular_React 专栏收录该内容

41 篇文章

订阅专栏

本教程深入浅出地讲解了React的基础知识，包括组件属性props的使用、状态state的管理、生命周期的理解以及如何通过Ajax实现数据的动态加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本博客的一贯宗旨是：坚持一本正经的写博客。

React官网传送门
本教程的所有源代码都托管在github上
地址 https://github.com/kkcode24/ReactTraining
#props对象
##props是只读的

props: 组件自带的的属性, 用于组件内外的值的传递
注: props是只读的, 只能获取, 不能修改

<script type="text/babel">
    var Hello = React.createClass({
        render: function () {
            return <h1>Hello, {this.props.name1}, {this.props.name2}</h1>
        }
    });

    ReactDOM.render(
        <Hello name1="小明" name2="小龙"/>,
        document.getElementById('example')
    );
    var values = {
        name1: '小李',
        name2: '小丽'
    };

    ReactDOM.render(
        <Hello name1={values.name1} name2={values.name2}/>,
        document.getElementById('example')
    );
</script>

##延展操作符

…(三个点, 延展操作符)是一种语法糖，把对象的属性值赋到对应的组件中

<script type="text/babel">
    var Hello = React.createClass({
        render: function () {
            return <h1>Hello, {this.props.name1}, {this.props.name2}</h1>
        }
    });

    var values = {
        name1: '小牛',
        name2: '小狗'
    };
    
    ReactDOM.render(
            <Hello {...values}/>,
            document.getElementById('example')
    );
</script>

##延展操作符练习

<script type="text/babel">
   var Link = React.createClass({
        render: function () {
            return <a {...this.props}>{this.props.name}</a>
        }
    });
    
    ReactDOM.render(
        <Link href="http://www.baidu.com" name="百度"/>,
        document.getElementById('example')
    );

    /*
     this.props = {
     href: "http://www.baidu.com",
     name: "百度"
     };
     */
</script>

##this.props.children

this.props.children: 代表元素内的子元素

<script type="text/babel">

    //抛砖引玉demo

    var List = React.createClass({
        render: function () {
            return (
                    <ul>
                        {
                            this.props.data.map(function (e) {
                                return <li>{e}</li>
                            })
                        }
                    </ul>
            );
        }
    });

    ReactDOM.render(
            <List data={[1, 2, 3]}></List>,
            document.getElementById('example')
    );
    
    //请结合05-props.html再看
</script>

05-props.html

<script type="text/babel">

    //this.props.children: 代表元素内的子元素
    
    var ListPro = React.createClass({
        render: function () {
            return (
                    <ul>
                        {
                            this.props.children.map(function (e) {
                                return <li>{e}</li>;
                            })
                        }
                    </ul>
            );
        }
    });

    ReactDOM.render(
        <ListPro a="1" b={2}>
            <em>斜体</em>
            <strong>粗体</strong>
            <a href="#">链接</a>
        </ListPro>,
        document.getElementById('example')
    );
</script>

##props指定默认值

<script type="text/babel">
   
    var data = 123;

    var ShowTitle = React.createClass({
        //指定默认值
        getDefaultProps: function () {
            //props是一个对象
            return {
                title: '默认标题'
            }
        },
        render: function () {
            return <h1>{this.props.title}</h1>
        }
    });
    ReactDOM.render(
            <ShowTitle title={data}/>,
            document.getElementById('example')
    );
</script>

#state状态

在此之前，先说下事件机制

<script type="text/babel">
    //事件处理
    var MyButton = React.createClass({
        //事件触发的函数
        click: function () {
            alert(this.props.title);
        },
        render: function () {
            return <button onClick={this.click}>{this.props.title}</button>
        }
    });

    ReactDOM.render(
            <MyButton title="我是按钮的标题"></MyButton>,
            document.getElementById('example')
    );
</script>

state和props的区别:
props用于记录组件的属性和子元素, 是一个只读的对象; state用于进行状态的记录,是一个可以修改的对象

练习: 定义一个组件CheckBox, 包含两部分复选框, 文本; 效果: 选择复选框, 文本变为true, 取消选择, 文本变成false

请结合02-state.html看

<script type="text/babel">

    var CheckBox = React.createClass({
        //获取初始的状态值state
        getInitialState: function () {
            return {
                isCheck: false
            }
        },
        click: function () {
            //不能用等号"="直接修改state
            //使用setState的方法来修改state
            this.setState({
                isCheck: !this.state.isCheck
            });
        },
        render: function () {
            return (
                    <div>
                        <input type="checkbox" onClick={this.click}/>
                        <span>{this.state.isCheck ? 'true' : 'false'}</span>
                    </div>
            );
        }
    });

    ReactDOM.render(
            <CheckBox/>,
            document.getElementById('example')
    );
</script>

练习: 实时显示输入内容
请结合03-state.html看

<script type="text/babel">
    
    var Input = React.createClass({
        getInitialState: function () {
            return {
                content: ''
            }
        },
        change: function (event) {
            //event: 触发的事件
            console.log(event.target.value);
            this.setState({
                content: event.target.value
            });
        },
        render: function () {
            return (
                    <div>
                        <input type="text" onChange={this.change}/>
                        <p>{this.state.content}</p>
                    </div>
            );
        }
    });

    ReactDOM.render(
        <Input/>,
        document.getElementById('container')
    );
</script>

#组件的生命周期

组件的生命周期: 从创建组件到组件移除的完整的过程
React组件的生命周期,分为三个阶段:
1.挂载阶段(Mounting): 把组件插入元素中
2.更新阶段(Update): 重新渲染组件
3.移除阶段(Unmounting): 从元素中移除组件
##挂载阶段

<script type="text/babel">
    var Demo = React.createClass({
        getDefaultProps: function () {
            console.log("获取默认属性值");
            return {
                name: 'world'
            }
        },
        getInitialState: function () {
            console.log("初始化状态值");
            return {
                isSelect: false
            }
        },
        componentWillMount: function () {
            console.log("将要挂载组件");
        },
        render: function () {
            console.log("渲染组件");
            return <h1>Hello, {this.props.name}!</h1>
        }
    });

    //第一个渲染组件
    ReactDOM.render(
        <Demo name="三儿"/>,
        document.getElementById('example')
    );
</script>

##更新阶段

<script type="text/babel">

    var Demo = React.createClass({
        getDefaultProps: function () {
            console.log("获取默认属性值");
            return {
                name: 'world'
            }
        },
        getInitialState: function () {
            console.log("初始化状态值");
            return {
                isSelect: false
            }
        },
        componentWillMount: function () {
            console.log("将要挂载组件");
        },
        render: function () {
            console.log("渲染组件");
            return <h1>Hello, {this.props.name}!</h1>
        },
        componentDidMount: function () {
            console.log("已经挂载组件");
        },
        componentWillReceiveProps: function () {
            console.log("将要接收到属性值");
        },
        shouldComponentUpdate: function () {
            console.log("是否可以更新组件");
            return true;
        },
        componentWillUpdate: function () {
            console.log("将要更新组件");
        },
        //render:  渲染组件
        componentDidUpdate: function () {
            console.log("已经更新组件");
        }
    });

    //第一个渲染组件
    ReactDOM.render(
        <Demo name="三儿"/>,
        document.getElementById('example')
    );

    //重新渲染组件
    ReactDOM.render(
        <Demo name="四儿"/>,
        document.getElementById('example')
    );

</script>

##移除组件

<script type="text/babel">

    var Demo = React.createClass({
        getDefaultProps: function () {
            console.log("获取默认属性值");
            return {
                name: 'world'
            }
        },
        getInitialState: function () {
            console.log("初始化状态值");
            return {
                isSelect: false
            }
        },
        componentWillMount: function () {
            console.log("将要挂载组件");
        },
        render: function () {
            console.log("渲染组件");
            return <h1>Hello, {this.props.name}!</h1>
        },
        componentDidMount: function () {
            console.log("已经挂载组件");
        },
        componentWillReceiveProps: function () {
            console.log("将要接收到属性值");
        },
        shouldComponentUpdate: function () {
            console.log("是否可以更新组件");
            return true;
        },
        componentWillUpdate: function () {
            console.log("将要更新组件");
        },
        componentDidUpdate: function () {
            console.log("已经更新组件");
        },
        componentWillUnmount: function () {
            console.log("将要移除组件");
        }
    });

    //第一个渲染组件
    ReactDOM.render(
        <Demo name="三儿"/>,
        document.getElementById('example')
    );

    //重新渲染组件
    ReactDOM.render(
        <Demo name="四儿"/>,
        document.getElementById('example')
    );

    //移除组件
    ReactDOM.unmountComponentAtNode(
        document.getElementById('example')
    );
</script>

06-lifecycle.html 是完成的测试，包含注释及代码
#React之Ajax

<script type="text/babel">
    var List = React.createClass({
        getInitialState: function () {
            return {
                arr: []
            }
        },
        render: function () {
            return (
                    <ul>
                        {
                            this.state.arr.map(function (e) {
                                return <li>{e}</li>
                            })
                        }
                    </ul>
            );
        },
        componentDidMount: function () {
            console.log("已经挂载组件");
            $.ajax({
                url: this.props.url,
                dataType: 'jsonp',
                type: "GET",
                jsonp: "cb",//jsonp回调的函数名的key值, 会自动将cb=success, 会调用success方法
                success: function (data) {
                    this.setState({
                        arr: data.s
                    });
                }.bind(this)
                //在函数的后面添加bind, 用于修改函数内部this的指向
            });
        }
    });


    ReactDOM.render(
            <List url="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=大宝剑"/>,
            document.getElementById('container')
    );

</script>