第一节:react简介和入门用法

一. react简介

1. 说明

 用于构建用户界面的 JavaScript 库 ( 官网: https://react.docschina.org/ ),React由Facebook来更新和维护,它是大量优秀程序员的思想结晶:

 (1). React的流行不仅仅局限于普通开发工程师对它的认可;

 (2). 大量流行的其他框架借鉴React的思想;

2. 哪些公司在用

   阿里云、哔哩哔哩、快手、小米

 

二. 入门

1. 开发依赖的库

 (1) react:包含react所必须的核心代码

 (2) react-dom:react渲染在不同平台所需要的核心代码

 (3) babel:将jsx代码转换成React代码的工具

PS:在React的0.14版本之前是没有react-dom这个概念的,所有功能都包含在react里, 那么为什么要拆分呢?

  原因就是react-native:

  (1). react包中包含了react web和react-native所共同拥有的核心代码。

  (2). react-dom针对web和native所完成的事情不同:

    ✓ web端:react-dom会将jsx最终渲染成真实的DOM,显示在浏览器中

    ✓ native端:react-dom会将jsx最终渲染成原生的控件(比如Android中的Button,iOS中的UIButton)

<body>
    <div id="root"></div>

    <!-- 三个依赖 -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">

        // React18之后的写法
        // const root = ReactDOM.createRoot(document.querySelector('#root'));
        // root.render(<h2>hello react</h2>);

        // React18之前的写法
        ReactDOM.render(<h2>hello react</h2>, document.querySelector('#root'));

    </script>

</body>

 

2. Babel和React的关系

 通过Babel工具,将ES6转成大多数浏览器都支持的ES5的语法

(1) 默认情况下开发React其实可以不使用babel, 但是前提是我们自己使用 React.createElement 来编写源代码,它编写的代码非常的繁琐和可读性差。

(2) 那么我们就可以直接编写jsx(JavaScript XML)的语法,并且让babel帮助我们转换成React.createElement。

 

3. 普通开发

 (1). 声明变量→封装事件→封装渲染函数→调用函数

  PS:这里我们编写React的script代码中,必须添加 type="text/babel",作用是可以让babel解析jsx的语法

 (2). createRoot函数:用于创建一个React根,之后渲染的内容会包含在这个根中

 (3). 可以通过{}语法来引入外部的变量或者表达式 

代码分享
 <body>
    <div id="root"></div>

    <!-- 引入三个必备库 -->
    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.js"></script>

    <script type="text/babel">
        const root = ReactDOM.createRoot(document.querySelector("#root"));

        // 1. 声明变量
        let msg = 'hello word';

        // 2. 封装事件
        function MyClick() {
            // 修改数据
            msg = 'hello react';

            // 重新渲染
            MyRender();
        }

        // 3. 封装一个渲染函数 (onClick 必须大写)
        function MyRender() {
            root.render(
                <div>
                    <h2>{msg}</h2>
                    <button onClick={MyClick}>修改信息</button>
                </div>
            );
        }

        // 4. 调用函数
        MyRender();

    </script>
</body>

 

4. 组件化开发

4.1 步骤

 (1). 我们知道root.render 参数是一个HTML元素或者一个组件,可以先将之前的业务逻辑封装到一个组件中,然后传入到 ReactDOM.render 函数中的第一个参数。

 (2). 定义一个类(类名大写,组件的名称是必须大写的,小写会被认为是HTML元素),继承自React.Component

 (3). 构造函数constructor

 (4). 实现当前组件的render函数

      ✓ render当中返回的jsx内容,就是之后React会帮助我们渲染的内容

4.2 如何处理数据?

 (1).存放数据:构造函数中 this.state = {定义的数据}  

 (2).修改数据:调用方法   this.setState({})  用来修改数据,执行该方法后,会自动重新调用render函数

4.3 如何处理事件绑定中的this?

 (1). 剖析:

  类中直接定义一个函数,并且将这个函数绑定到元素的onClick事件上,当前这个函数的this指向的是undefined。

  原因:严格模式下,默认调用的this指向undefined,而babel转换代码,默认是开启严格模式的。

 (2). 如何解决

   方案A. 直接在标签中手动绑定:  <button onClick={this.btnClick.bind(this)}>改变文本</button>

   方案B. 在构造函数constructor中提前绑定: this.btnClick = this.btnClick.bind(this);

   方案C: 回调函数

后面章节会完整分析(详见 jsx的事件绑定部分)

代码分享
 <body>
    <div id="root"></div>

    <!-- 引入三个必备库 -->
    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.js"></script>

    <script type="text/babel">

        // 1. 声明组件(类组件的模式)
        class App extends React.Component {
            //1.1 构造函数
            constructor() {
                super();
                // 数据放到state里
                this.state = { msg: 'hello word', name: 'ypf', age: 18 }

                // 写法1:提前绑定,解决this为undefined的问题
                this.btnClick = this.btnClick.bind(this);
            }
            //1.2 组件方法
            btnClick() {
                console.log('btnClick', this);
                this.setState({ msg: 'hello react' });
            }
            //1.3 渲染方法
            render() {
                return (
                    <div>
                        <h2>{this.state.msg}</h2>
                        <button onClick={this.btnClick}>修改信息</button>
                    </div>
                );
            }

            // 写法2: 解决this为undefined的问题
            // render() {
            //     return (
            //         <div>
            //             <h2>{this.state.msg}</h2>
            //             <button onClick={this.btnClick.bind(this)}>修改信息</button>
            //         </div>
            //     );
            // }
        }

        // 2. 把组件渲染到页面上
        const root = ReactDOM.createRoot(document.querySelector('#root'));
        root.render(<App />)


    </script>

</body>

 

 

三. 相关案例

1 电影列表

  3种写法 

代码分享
  <script type="text/babel">
        // 1. 声明组件
        class App extends React.Component {
            // 1.1 构造函数
            constructor() {
                super();
                this.state = {
                    movies: ["星际穿越", "流浪地球", "独行月球", "大话西游", "火星救援"]
                }
            }
            // 1.2 渲染方法
            render() {
                // 写法1 (加个key,防止报警告)
                // let movieList = [];
                // this.state.movies.forEach((item, index) => {
                //     let liEle = <li key={index}>{item}</li>;
                //     movieList.push(liEle);
                // });

                // 写法2
                // let movieList = this.state.movies.map((item, index) => <li key={index}>{item}</li>);
                // return (
                //     <div>
                //         <h2>电影列表</h2>
                //         <ul>{movieList}</ul>
                //     </div>
                // );

                //写法3(直接写在jsx中)
                return (
                    <div>
                        <h2>电影列表</h2>
                        <ul>{this.state.movies.map((item, index) => <li key={index}>{item}</li>)}</ul>
                    </div>
                );

            }
        }

        // 2. 将组件渲染到页面上
        const root = ReactDOM.createRoot(document.querySelector("#root"));
        root.render(<App />)

    </script>

 

2 计数器

   详见代码 

代码分享
 <script type="text/babel">
        // 1. 声明组件
        class App extends React.Component {
            // 1.1 构造函数
            constructor() {
                super();
                this.state = {
                    title: '计数器',
                    counter: 100
                }
            }
            // 1.2 渲染方法
            render() {
                return (
                    <div>
                        <h2>{this.state.counter}</h2>
                        <button onClick={this.increase.bind(this)}>加1</button>
                        <button onClick={this.decrement.bind(this)}>减1</button>
                    </div>
                );
            }
            // 实例方法
            increase() {
                this.setState({ counter: ++this.state.counter })
            }
            decrement() {
                this.setState({ counter: --this.state.counter })
            }
        }

        // 2. 将组件渲染到页面上
        const root = ReactDOM.createRoot(document.querySelector("#root"));
        root.render(<App />)

    </script>

 

 

 

 

!

  • 作       者 : Yaopengfei(姚鹏飞)
  • 博客地址 : http://www.cnblogs.com/yaopengfei/
  • 声     明1 : 如有错误,欢迎讨论,请勿谩骂^_^。
  • 声     明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址,否则保留追究法律责任的权利。
 
posted @ 2023-04-05 13:51  Yaopengfei  阅读(233)  评论(1编辑  收藏  举报