爱分享

电脑基础 · 2023年3月14日

React入门笔记

1、React入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        ReactDOM.render(
            <h1>hello world2</h1>,
            document.getElementById('app')
        )
    </script>
</body>
</html>

2、JSX语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        let a = '变量a'
        ReactDOM.render(
            <h1 className="h1">{a}</h1>,
            document.getElementById('app')
        )
    </script>
</body>
</html>

3、元素渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Document</title>
</head>
<style>
    .red{
        color: red;
    }
</style>
<body>
    <div id="app"></div>
    <script type="text/babel">
        function test(){
            //只会渲染变动的地方，而不会像js操作dom一样全部修改
            let time = new Date().toLocaleTimeString()
            let template = <div>
                    <h1 className="red">现在时间是</h1>
                    <h2> {time} </h2>
                </div>
            ReactDOM.render(
                template,
                document.getElementById('app')
            )
        }
        setInterval(test,1000)
    </script>
</body>
</html>

4、组件和props传值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
    <!--
        React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component）
        无状态组件：直接定义函数的形式，不存在state，只会有props，它没有生命周期
        有状态组件：使用class定义，extend继承，由state进行数据的存储和管理，同时还可以有props，有生命周期
        传值的时候有状态组件取用的是this.state.属性或者是this.props.属性
        无状态组件的话使用的是props.属性
    -->
</body>
</html>

5、函数式组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
    <!--
        React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component）
        无状态组件：直接定义函数的形式，不存在state，只会有props，它没有生命周期
        有状态组件：使用class定义，extend继承，由state进行数据的存储和管理，同时还可以有props，有生命周期
        传值的时候有状态组件取用的是this.state.属性或者是this.props.属性
        无状态组件的话使用的是props.属性
    -->
    <div id="app1"></div>
    <script type="text/babel">
    //    函数式组件
    // function Hello(){
    //     return <h1>Hello World</h1>
    // }
    //多个元素一定要记得写根元素
    function Hello(){
        return <div>
                <h1>Hello World</h1>
                <h1>Hello World</h1>
                <h1>Hello World</h1>
            </div>
    }
    ReactDOM.render(
        <Hello/>,
        document.getElementById('app1')
    )
    </script>
</body>
</html>

6、函数是组件和props传值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
    <!--
        React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component）
        无状态组件：直接定义函数的形式，不存在state，只会有props，它没有生命周期
        有状态组件：使用class定义，extend继承，由state进行数据的存储和管理，同时还可以有props，有生命周期
        传值的时候有状态组件取用的是this.state.属性或者是this.props.属性
        无状态组件的话使用的是props.属性
    -->
    <div id="app1"></div>
    <script type="text/babel">
    //    函数式组件
    // function Hello(){
    //     return <h1>Hello World</h1>
    // }
    //多个元素一定要记得写根元素
    function Temp(props){
        return <div>
                <h1>函数式组件，使用props传值</h1>
                <h1>姓名：{props.name}</h1>
                <h1>年龄: {props.age}</h1>
            </div>
    }
    ReactDOM.render(
        <Temp name='小明' age='18'/>,
        document.getElementById('app1')
    )
    </script>
</body>
</html>

7、有状态组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
    <!--
        React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component）
        无状态组件：直接定义函数的形式，不存在state，只会有props，它没有生命周期
        有状态组件：使用class定义，extend继承，由state进行数据的存储和管理，同时还可以有props，有生命周期
        传值的时候有状态组件取用的是this.state.属性或者是this.props.属性
        无状态组件的话使用的是props.属性
    -->
    <div id="root"></div>
    <script type="text/babel">
    class Hello extends React.Component{
        render(){
            return <h1>Hello World</h1>
        }
    }
    ReactDOM.render(
        <Hello />,
        document.getElementById('root')
    )
    </script>
</body>
</html>

8、有状态组件props

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
    <!--
        React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component）
        无状态组件：直接定义函数的形式，不存在state，只会有props，它没有生命周期
        有状态组件：使用class定义，extend继承，由state进行数据的存储和管理，同时还可以有props，有生命周期
        传值的时候有状态组件取用的是this.state.属性或者是this.props.属性
        无状态组件的话使用的是props.属性
    -->
    <div id="root"></div>
    <script type="text/babel">
    class Hello extends React.Component{
        render(){
            return <div>
                    <h1>Hello World</h1>
                    <p>姓名：{this.props.name}</p>
                    <p>性别：{this.props.age}</p>
                </div>
        }
    }
    ReactDOM.render(
        <Hello age="18" name="小明"/>,
        document.getElementById('root')
    )
    </script>
</body>
</html>

9、事件处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
    <!--
        React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component）
        无状态组件：直接定义函数的形式，不存在state，只会有props，它没有生命周期
        有状态组件：使用class定义，extend继承，由state进行数据的存储和管理，同时还可以有props，有生命周期
        传值的时候有状态组件取用的是this.state.属性或者是this.props.属性
        无状态组件的话使用的是props.属性
    -->
    <div id="root"></div>
    <script type="text/babel">
    class Hello extends React.Component{
        constructor(props){
            super(props)
            this.state = {
                name: "小李",
                age: 18
            }
        }
        updateInfor = ()=>{
            this.setState({
                name: 'hello',
                age: 13
            })
        }
        render(){
            return <div>
                    <h1>Hello World</h1>
                    <p>姓名：{this.state.name}</p>
                    <p>性别：{this.state.age}</p>
                    <button onClick={this.updateInfor}>更新数据</button>
                </div>
        }
    }
    ReactDOM.render(
            <Hello/>,
            document.getElementById('root')
    )
    </script>
</body>
</html>

10、事件处理this详解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
    <!--
        React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component）
        无状态组件：直接定义函数的形式，不存在state，只会有props，它没有生命周期
        有状态组件：使用class定义，extend继承，由state进行数据的存储和管理，同时还可以有props，有生命周期
        传值的时候有状态组件取用的是this.state.属性或者是this.props.属性
        无状态组件的话使用的是props.属性
    -->
    <div id="root"></div>
    <script type="text/babel">
    class Hello extends React.Component{
        constructor(props){
            super(props)
            this.state = {
                name: "小李",
                age: 18
            }
            this.updateInfor1 = this.updateInfor1.bind(this)
        }
        updateInfor = ()=>{
            this.setState({
                name: 'hello',
                age: 13
            })
        }
        updateInfor1(){
            this.setState({
                name: 'hello',
                age: 13
            })
        }
        updateInfor2(){
            this.setState({
                name: 'hello',
                age: 13
            })
        }
        render(){
            return <div>
                    <h1>Hello World</h1>
                    <p>姓名：{this.state.name}</p>
                    <p>性别：{this.state.age}</p>
                    {/* <button onClick={this.updateInfor}>更新数据</button> */}
                    <button onClick={this.updateInfor1}>更新数据</button>
                    <button onClick={this.updateInfor2.bind(this)}>更新数据</button>
                </div>
        }
    }
    ReactDOM.render(
            <Hello/>,
            document.getElementById('root')
    )
    </script>
</body>
</html>

11、列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
    <!--
        React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component）
        无状态组件：直接定义函数的形式，不存在state，只会有props，它没有生命周期
        有状态组件：使用class定义，extend继承，由state进行数据的存储和管理，同时还可以有props，有生命周期
        传值的时候有状态组件取用的是this.state.属性或者是this.props.属性
        无状态组件的话使用的是props.属性
    -->
    <div id="root"></div>
    <script type="text/babel">
    class Hello extends React.Component{
        state = {
            list: [1,2,3,4,5]
        }
        render(){
            const arr = this.state.list
            const lists = []
            arr.forEach(i=>{
                let li = <li> {arr[i-1]} </li>
                lists.push(li)
            })
            return <div>
                    <ul>
                        {lists}
                    </ul>
                </div>
        }
    }
    ReactDOM.render(
            <Hello/>,
            document.getElementById('root')
    )
    </script>
</body>
</html>

12、循环需要key

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
    <!--
        React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component）
        无状态组件：直接定义函数的形式，不存在state，只会有props，它没有生命周期
        有状态组件：使用class定义，extend继承，由state进行数据的存储和管理，同时还可以有props，有生命周期
        传值的时候有状态组件取用的是this.state.属性或者是this.props.属性
        无状态组件的话使用的是props.属性
    -->
    <div id="root"></div>
    <script type="text/babel">
    class Hello extends React.Component{
        state = {
            list: [1,2,3,4,5]
        }
        render(){
            const arr = this.state.list
            const lists = []
            arr.map((item, index)=>{
                let li = <li key={index}> {item} </li>
                lists.push(li)
            })
            return <div>
                    <ul>
                        {lists}
                    </ul>
                </div>
        }
    }
    ReactDOM.render(
            <Hello/>,
            document.getElementById('root')
    )
    </script>
</body>
</html>

13、条件处理1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
    <!--
        React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component）
        无状态组件：直接定义函数的形式，不存在state，只会有props，它没有生命周期
        有状态组件：使用class定义，extend继承，由state进行数据的存储和管理，同时还可以有props，有生命周期
        传值的时候有状态组件取用的是this.state.属性或者是this.props.属性
        无状态组件的话使用的是props.属性
    -->
    <div id="root"></div>
    <script type="text/babel">
    function Login(){
        return <button> Login </button>
    }
    function Logout(){
        return <button> Logout </button>
    }
    class Hello extends React.Component{
        state = {
            isLogin:true
        }
        render(){
            const isLogin = this.state.isLogin
            let button
            if(isLogin){
                button = Logout()
            }else{
                button = Login()
            }
            return <div>
                    {button}
                </div>
        }
    }
    ReactDOM.render(
            <Hello/>,
            document.getElementById('root')
    )
    </script>
</body>
</html>

14、条件处理2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
    <!--
        React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component）
        无状态组件：直接定义函数的形式，不存在state，只会有props，它没有生命周期
        有状态组件：使用class定义，extend继承，由state进行数据的存储和管理，同时还可以有props，有生命周期
        传值的时候有状态组件取用的是this.state.属性或者是this.props.属性
        无状态组件的话使用的是props.属性
    -->
    <div id="root"></div>
    <script type="text/babel">
    function Login(){
        return <button> Login </button>
    }
    function Logout(){
        return <button> Logout </button>
    }
    class Hello extends React.Component{
        state = {
            isLogin:true
        }
        render(){
            const {isLogin} = this.state
            let button
            return <div>
                    {isLogin ? <Login/> : <Logout/>}
                </div>
        }
    }
    ReactDOM.render(
            <Hello/>,
            document.getElementById('root')
    )
    </script>
</body>
</html>

15、条件处理和事件处理组合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
    <!--
        React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component）
        无状态组件：直接定义函数的形式，不存在state，只会有props，它没有生命周期
        有状态组件：使用class定义，extend继承，由state进行数据的存储和管理，同时还可以有props，有生命周期
        传值的时候有状态组件取用的是this.state.属性或者是this.props.属性
        无状态组件的话使用的是props.属性
    -->
    <div id="root"></div>
    <script type="text/babel">
    function Login(){
        return <button> Login </button>
    }
    function Logout(){
        return <button> Logout </button>
    }
    class Hello extends React.Component{
        state = {
            isLogin:false
        }
        updataInfo = ()=>{
            this.setState({
                isLogin:!this.state.isLogin
            })
        }
        render(){
            const {isLogin} = this.state
            let button
            return <div>
                    {isLogin ? <Login/> : <Logout/>}
                    <button onClick={this.updataInfo}>更新数据</button>
                </div>
        }
    }
    ReactDOM.render(
            <Hello/>,
            document.getElementById('root')
    )
    </script>
</body>
</html>

标签：

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注