框架《React》库的学习笔记（从5到8）

最新推荐文章于 2024-09-19 10:55:28 发布

garrulousabyss

最新推荐文章于 2024-09-19 10:55:28 发布

阅读量182

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/garrulousabyss/article/details/82703569

版权

前端专栏收录该内容

45 篇文章 1 订阅

订阅专栏

五. 模块与组件的理解

六. react组件的基本定义和使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
</head>
<body>
<div id="example1"></div>
<div id="example2"></div>
 
<script type="text/babel">
    //1. 定义组件
    // 方式1： 工厂函数组件（简单组件）
    function MyComponent(){
        return <h2>工厂函数组件（简单组件）</h2>
    }
    // 方式2： ES6类组件（复杂组件）
    class MyComponent2 extends React.Component {
 
        render() {
 
            return <h2>ES6的类组件（简单组件）</h2>
        }
    }
 
    //2. 渲染组件标签
    ReactDOM.render(<MyComponent/>,document.getElementById('example1'))
    ReactDOM.render(<MyComponent2/>,document.getElementById('example2'))
</script>
</body>
</html>

七. 组件三大属性（一）———state

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
</head>
<body>
<div id="example"></div>
 
<script type="text/babel">
    /*
    需求：自定义组件，功能说明如下
        1. 显示h2标题，初始文本为：你喜欢我
        2. 点击标题更新为：我喜欢你
     */
 
    //1 .定义组件
    class Like extends React.Component {
 
        constructor(props) {
            super(props);
            //初始化状态
            this.state = {
                isLikeMe: false
            };
 
            //将新增方法中的this强制绑定为组件对象
            this.handleClick = this.handleClick.bind(this);
        }
 
        //这里是新添加的方法
        //内部的this，默认不是组件对象，而是undefined
        handleClick() {
            //先要得到，更新前的状态，再取反
            const isLikeMe = !this.state.isLikeMe;
            //更新状态
            this.setState({isLikeMe});
        }
 
        //重写组件类的方法
        render() {
            const {isLikeMe} = this.state;
            return <h2 onClick={this.handleClick}>{isLikeMe?'你喜欢我':'我喜欢你'}</h2>;
        }
    }
 
    //2. 渲染组件标签
    ReactDOM.render(<Like/>, document.getElementById('example'));
</script>
</body>
</html>

八. 组件三大属性（二）———props

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
    <!--这个库是用于限定输入时的数据类型，-->
    <script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>
</head>
<body>
<div id="example"></div>
<div id="example2"></div>
<script type="text/babel">
    // 需求：
    // 自定义用来显示一个人员信息的组件，效果如页面，说明：
    // （1）如果性别没有指定，默认为男
    // （2）如果年龄没有设定，默认为18
 
    //1. 定义组件：
    function Person(props) {
        return(
            <ul>
                <li>姓名：{props.name}</li>
                <li>年龄：{props.age}</li>
                <li>性别：{props.sex}</li>
            </ul>
        )
    }
 
    //指定属性默认值
    Person.defaultProps = {
        sex: '男',
        age: 18
    };
 
    //指定属性值的类型和必要性
    Person.propTypes = {
        name: PropTypes.string.isRequired,
        age: PropTypes.number
    };
 
    //2. 渲染组件标签
    const p1 = {
        name: 'Tome',
        age: 18,
        sex: '女'
    };
 
    ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex}/>,document.getElementById('example'));
 
    const p2 = {
        name: 'Jack'
    };
 
    <!--ReactDOM.render(<Person name={p2.name} age={p2.age} sex={p2.sex}/>,document.getElementById('example2'));-->
    //...的左右
    //1.打包
    // function fn(...as) {} fn(1,2,3)
    //2.解包
    ReactDOM.render(<Person{...p2}/>,document.getElementById('example2'));
 
</script>
</body>
</html>