React教程（一）

React：

官网：进入官网后，最先引入眼帘的是这样一段描述：“用于构建用户界面的 JavaScript 库”，非常的霸气侧漏，这也是我决定学习它的原因。

特点：声明式（交互容易）、组件化（大型项目）、一次学习，随处编写（支持手机、浏览器等）

使用CDN的方式

demo1: 最简单的Hello World

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Dome</title>
    <!-- CDN方式引入 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 也可以i使用npm add react react-dom --save 安装一个node-moudle包都有js，可以引用 -->
</head>
<body>
    <div id="app">

    </div>
    <script type="text/babel">
        // 生成一个DOM，如果生成的dom过多时会使用虚拟dom来插入到真实的DOM中
        var hello = React.createElement('h1',{
            className:'red',  // 添加属性
            name:'jack'
        },"Hello React!")
        ReactDOM.render(hello,document.getElementById('app'))
    </script>
</body>
</html>

demo2: jsx，一种js和html+xml交互的方式

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Dome</title>
    <!-- CDN方式引入 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 也可以i使用npm add react react-dom --save 安装一个node-moudle包都有js，可以引用 -->
    <!-- 引入babel可以进行jsx的语法解析 -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <style>
        .blue{
            color:blue;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <div id="app1"></div>
    <script type="text/babel">
        // js中插入html代码，其实框架中帮我们创建
        ReactDOM.render(
            // jsx是完成我们可以在js中完成html代码的编写，同时可以html中可以嵌套js代码，属于语法糖
            <h1 className="blue" name="wang">Hello Jsx</h1> 
            //  注意这里不能是class因为它是js的关键字
            ,document.getElementById('app'))

        // 使用js中嵌套html
        var name = "wangl"
        var ele = <h1>Hello : {name}</h1>  // html中插入js变量
        ReactDOM.render(
            ele,
            document.getElementById('app1')
        )
    </script>
</body>
</html>

demo3: 生命周期

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Dome</title>
    <!-- CDN方式引入 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 也可以i使用npm add react react-dom --save 安装一个node-moudle包都有js，可以引用 -->
    <!-- 引入babel可以进行jsx的语法解析 -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <style>
        .blue{
            color:blue;
        }
    </style>
</head>
<body>
    <div id="app3"></div>
    <script type="text/babel">
        // 生命周期函数演示
        // 标准组件，带生命周期(带状态），查创建一个class对象继承Component
        class HelloJack extends React.Component {
            constructor (props) {  // 构造函数
                console.log("初始化阶段")
                // 初始化props，组件上的属性
                super(props); 
                // 初始化状态
                this.state = {
                    name:"Xing", 
                    age:30
                }
            }
            componentWillMount(){
                // 常用于发送ajax请求
                console.log("组件加载之前")
            }
            componmentDidMount(){
                console.log("组件加载后")
            }
            updateUser = ()=>{  // => 函数
                this.setState({  // this是指向上下文的button，自动触发更新，并render
                    name:"666",
                    age:30
                })
            }
            shouldComponentUpdate(){   // 返回true更新
                console.log("数据是否更新？")
                // 逻辑判断...
                return true; // 默认为true，不用实现
            }
            componentWillUpdate(){
                console.log("数据将要更新")
            }
            componentDidUpdate(){
                console.log("数据已经更新")
            }
            render(){
                console.log('组件加载中或者数据更新')
                return <div>
                    <h1>Hello: {this.props.name}, 默认值：{this.state.name}</h1>  
                    <p>年纪： {this.props.age}</p>
                    <button onClick={this.updateUser}>更新数据</button>
                </div>   // 带参数的传递使用this
            }
        }
        ReactDOM.render(
            <HelloJack name="xxx" age="25"/>,
            document.getElementById('app3')
        )
    </script>
</body>
</html>

demo4: 组件传参

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Dome</title>
    <!-- CDN方式引入 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 也可以i使用npm add react react-dom --save 安装一个node-moudle包都有js，可以引用 -->
    <!-- 引入babel可以进行jsx的语法解析 -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <style>
        .blue{
            color:blue;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <div id="app1"></div>
    <div id="app3"></div>
    <script type="text/babel">
        // 组件化开发：函数组件（无状态）、标准组件（有状态，可以使用this代表class的实例）
        // 创建函数返回一个jsx，函数组件
        function Hello() {
            return <h1> Hello, Jack</h1>
        }
        ReactDOM.render(
            <Hello/>,    // 这里直接调用函数名加<>,就成为了组件了
            document.getElementById('app')
        )

        function Hello_plus(props){
            return <div>
                <h1>Hello: {props.name}</h1>
                <p>年纪： {props.age}</p>
            </div>
        }
        ReactDOM.render(
            <Hello_plus name="Li" age="23"/>,
            document.getElementById('app1')
        )

        // 标准组件，带生命周期(带状态），查创建一个class对象继承Component
        class HelloJack extends React.Component {

            // render() {  // 渲染
            //     return <h1> Hello JackLove </h1>
            // }

            render(){
                return <div>
                    <h1>Hello: {this.props.name}</h1>  
                    <p>年纪： {this.props.age}</p>
                </div>   // 带参数的传递使用this
            }
        }
        ReactDOM.render(
            <HelloJack name="xxx" age="25"/>,
            document.getElementById('app3')
        )
    </script>
</body>
</html>

demo5: render渲染函数

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Dome</title>
    <!-- CDN方式引入 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 也可以i使用npm add react react-dom --save 安装一个node-moudle包都有js，可以引用 -->
    <!-- 引入babel可以进行jsx的语法解析 -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <style>
        .blue{
            color:blue;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <div id="app1"></div>
    <script type="text/babel">
        // 元素的实时渲染
        function tick() {
            // 使用js中嵌套html,react 是单向数据流
            var time = new Date().toLocaleTimeString();
            var ele = <div>  
                <h1>Hello : Wang </h1>
                <h1>{time}</h1>
            </div>                // 当要渲染的标签是多个时必须要又一个父标签，类似与vue中的template下必须要有一div
            ReactDOM.render(
                ele,
                document.getElementById('app1')
            )
        }
        setInterval(tick,1000)
    </script>
</body>
</html>

　　相对而言，React的学习成本可以相对低，网上有很多教程，如果可以我们可以通过网上更好的学习，这里推荐去官网学习，已经很详细了（基础），对于更加深入的学习，我们会使用react来创建一个比较复杂的应用。

React：

猜你喜欢