React快速入门（一）基础与语法

发布时间：2024年01月18日

React快速入门（一）基础与语法

React快速入门（一）基础与语法

用于构建用户界面的JavaScript库
目前国内外最流行的三大框架：Vue，React，Angular

React的介绍和特点

声明式
- 只需要维护自己的状态，当状态改变时，React可以根据最新的状态去渲染我们的UI界面

在这里插入图片描述

组件化
- 组件化开发页面是目前前端的流行趋势，我们会将复杂的界面拆分成一个个小的组件

在这里插入图片描述

跨平台
- React开发Web页面
- ReactNative用于开发移动端跨平台
- ReactVR开发虚拟现实Web应用程序

React开发依赖分析

必须依赖的三个库

react：包含react所必须的核心代码
react-dom：react渲染在不同平台所需要的核心代码
babel：将jsx转换成React代码的工具

添加三个依赖的方式

方式—：直接CDN引入
方式二：下载后，添加本地依赖
方式三：通过npm管理(后续脚手架再使用)

React组件化的封装

<script type="text/babel">
	//用于创建一个React根，之后渲染的内容会包含在这个根中
	const root =ReactDOM.createRoot(document.querySelector("#root"))
	root.render(<h2>Hello World</h2>)
</script>

重构

	const root = ReactDOM.createRoot(document.querySelector("#root"))
    // 1.将文本定义成变量
    let message = "Hello World"
    // 2.监听按钮的点击
    function btnClick() {
      // 1.1.修改数据
      message = "Hello React"
      // 2.重新渲染界面，否则状态修改无法生效！
      rootRender()
    }
    // 3.封装一个渲染函数
    function rootRender() {
      root.render((
        <div>
          <h2>{message}</h2>
          <button onClick={btnClick}>修改文本</button>
        </div>
      ))
    }
    rootRender()

//定义一个类，类名大写，组件的名称必须是大写，小写会被认为是HTML元素，继承自React.Component
class App extends React.Component {
  // 组件数据
  constructor() {
    super()
    this.state = {
      message: "Hello World",
      name: "why",
      age: 18
    }

    // 对需要绑定的方法, 提前绑定好this
    this.btnClick = this.btnClick.bind(this)
  }

  // 组件方法(实例方法)
  btnClick() {
    // 内部完成了两件事情: 
    // 1.将state中message值修改掉 2.自动重新执行render函数函数
    this.setState({
      message: "Hello React"
    })
  }

  // 渲染内容 render方法
  render() {
    return (
      <div>
        <h2>{this.state.message}</h2>
        <button onClick={this.btnClick}>修改文本</button>
      </div>
    )
  }
}
// 将组件渲染到界面上
const root = ReactDOM.createRoot(document.querySelector("#root"))
// App根组件
root.render(<App/>)

React数据事件处理

数据定义
- 参与界面更新的数据(参与数据流)：当数据(定义在当前对象的state中)变化时，需要更新组件渲染的内容
  - 在构造函数中this.state ={定义的数据}
  - 调用this.setState 来更新数据，并且通知React进行update操作;在进行update操作时，就会重新调用render函数，并且使用最新的数据，来渲染界面
- 不参与界面更新的数据：当数据变化时，不需要更新组件渲染的内容
事件绑定
- 类中定义函数，将函数绑定到事件上
- this指向默认情况下是undefined，因为React不是直接渲染真实DOM，发生监听时，react在执行函数时并没有绑定this，默认情况下就是undefined
- 在绑定的函数中，可能想要使用当前对象，比如执行 this.setState 函数，就必须拿到当前对象的this

JSX语法

JSX是一种JavaScript的语法扩展（eXtension)，也在很多地方称之为JavaScript XML，因为看起来就是一段XML语法;
它用于描述我们的UI界面，并且其完成可以和JavaScript融合在一起使用；它不同于Vue中的模块语法，需要专门学习模块语法中的一些指令(比如v-for、v-if、v-else、v-bind) ;
JSX的书写规范:
- JSX的顶层只能有一个根元素，所以我们很多时候会在外层包裹一个div元素（或者使用后面我们学习的Fragment) ;
- 为了方便阅读，我们通常在jsx的外层包裹一个小括号)，这样可以方便阅读，并且jsx可以进行换行书写;JSX中的标签可以是单标签，也可以是双标签;
- JSX的注释：{ */\* JSX的注释写法 \*/*}

// 1.定义App根组件
    class App extends React.Component {
      constructor() {
        super()
        this.state = {
          counter: 100,
          message: "Hello World",
          names: ["abc", "cba", "nba"],

          aaa: undefined,
          bbb: null,
          ccc: true,

          friend: { name: "kobe" },

          firstName: "kobe",
          lastName: "bryant",

          age: 20,

          movies: ["流浪地球", "星际穿越", "独行月球"]
        }
      }

      render() {
        // 1.插入标识符
        const { message, names, counter } = this.state
        const { aaa, bbb, ccc } = this.state
        const { friend } = this.state

        // 2.对内容进行运算后显示(插入表示)
        const { firstName, lastName } = this.state
        const fullName = firstName + " " + lastName
        const { age } = this.state
        const ageText = age >= 18 ? "成年人": "未成年人"
        const liEls = this.state.movies.map(movie => <li>{movie}</li>)

        // 3.返回jsx的内容
        return (
          <div>
            {/* 1.当变量是Number/String/Array直接显示出来 */}
            <h2>{counter}</h2>
            <h2>{message}</h2>
            <h2>{names}</h2>

            {/* 2.当变量是undefined/null/Boolean类型时，内容为空 */}
            <h2>{String(aaa)}</h2>
            <h2>{bbb + ""}</h2>
            <h2>{ccc.toString()}</h2>

            {/* 3.Object类型不能作为子元素进行显示*/}
			{/*<h2>{friend}</h2> ×*/}
            <h2>{friend.name}</h2>
            <h2>{Object.keys(friend)[0]}</h2>

            {/* 4.可以插入对应的表达式*/}
            <h2>{10 + 20}</h2>
            <h2>{firstName + " " + lastName}</h2>
            <h2>{fullName}</h2>

            {/* 5.可以插入三元运算符*/}
            <h2>{ageText}</h2>
            <h2>{age >= 18 ? "成年人": "未成年人"}</h2>

            {/* 6.可以调用方法获取结果*/}
            <ul>{liEls}</ul>
            <ul>{this.state.movies.map(movie => <li>{movie}</li>)}</ul>
            <ul>{this.getMovieEls()}</ul>
          </div>
        )
      }

      getMovieEls() {
        const liEls = this.state.movies.map(movie => <li>{movie}</li>)
        return liEls
      }
    }

    // 2.创建root并且渲染App组件
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)

JSX绑定属性

// 1.定义App根组件
    class App extends React.Component {
      constructor() {
        super()
        this.state = {
          title: "哈哈哈",
          imgURL: "https://ts1.cn.mm.bing.net/th/id/R-C.95bc299c3f1f0e69b9eb1d0772b14a98?rik=W5QLhXiERW4nLQ&riu=http%3a%2f%2f20178405.s21i.faiusr.com%2f2%2fABUIABACGAAgoeLO-wUo4I3o2gEw8Qs4uAg.jpg&ehk=N7Bxe9nqM08w4evC2kK6yyC%2bxIWTjdd6HgXsQYPbMj0%3d&risl=&pid=ImgRaw&r=0",
          href: "https://www.baidu.com",

          isActive: true,
          objStyle: {color: "red", fontSize: "30px"}
        }
      }

      render() {
        const { title, imgURL, href, isActive, objStyle } = this.state

        // 需求: isActive: true -> active
        // 1.class绑定的写法一: 字符串的拼接
        const className = `abc cba ${isActive ? 'active': ''}`
        // 2.class绑定的写法二: 将所有的class放到数组中
        const classList = ["abc", "cba"]
        if (isActive) classList.push("active")
        // 3.class绑定的写法三: 第三方库classnames -> npm install classnames

        return (
          <div>
            { /* 1.基本属性绑定 */ }
            <h2 title={title}>我是h2元素</h2>
            {/*<img src={imgURL} alt=""/>*/}
            <a href={href}>百度一下</a>

            
            { /* 2.绑定class属性: 最好使用className */ }
            <h2 className={className}>哈哈哈哈</h2>
            <h2 className={classList.join(" ")}>哈哈哈哈</h2>

            
            { /* 3.绑定style属性: 绑定对象类型 */ }
            <h2 style={{color: "red", fontSize: "30px"}}>呵呵呵呵</h2>
            <h2 style={objStyle}>呵呵呵呵</h2>
          </div>
        )
      }
    }

    // 2.创建root并且渲染App组件
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)

createElement需要传递三个参数:
- 参数一: type：当前ReactElement的类型;
  如果是标签元素，那么就使用字符串表示“div” ;如果是组件元素，那么就直接使用组件的名称;
- 参数二: config：所有jsx中的属性都在config中以对象的属性和值的形式存储;比如传入className作为元素的class;
- 参数三:children：存放在标签中的内容，以children数组的方式进行存储;如果是多个元素React内部有对它们进行处理，处理的源码在下方

React事件绑定

React事件的命名采用小驼峰式(camelCase) ，而不是纯小写;
我们需要通过{}传入一个事件处理函数，这个函数会在事件发生时被执行;

this的绑定问题

方案一: bind给btnClick显示绑定this
方案二: 使用ES6 class fields语法
方案三: 事件监听时传入箭头函数（个人推荐)

事件参数传递

获取event对象

{/* 1.event参数的传递 */}
<button onClick={this.btnClick.bind(this)}>按钮1</button>
<button onClick={(event) => this.btnClick(event)}>按钮2</button>

获取更多对象

 {/* 2.额外的参数传递 */}
<button onClick={this.btnClick.bind(this, "kobe", 30)}>按钮3(不推荐)</button>
<button onClick={(event) => this.btnClick(event, "why", 18)}>按钮4</button>

React条件渲染

条件判断语句：适合逻辑较多的情况
三元运算符：适合逻辑比较简单
与运算符&&：适合如果条件成立，渲染某一个组件;如果条件不成立，什么内容也不渲染

	<div>
            {/* 1.方式一: 根据条件给变量赋值不同的内容 */}
            <div>{showElement}</div>

            {/* 2.方式二: 三元运算符 */}
            <div>{ isReady ? <button>开始战斗!</button>: <h3>赶紧准备</h3> }</div>

            {/* 3.方式三: &&逻辑与运算 */}
            {/* 场景: 当某一个值, 有可能为undefined时, 使用&&进行条件判断 */}
            <div>{ friend && <div>{friend.name + " " + friend.desc}</div> }</div>
    </div>

React列表渲染

如何展示列表呢?在React中，展示列表最多的方式就是使用数组的map高阶函数;
很多时候我们在展示一个数组中的数据之前，需要先对它进行一些处理:比如过滤掉—些内容: filter函数
比如截取数组中的一部分内容: slice函数
key主要的作用是为了提高diff算法时的效率

		<div>
            <h2>学生列表数据</h2>
            <div className="list">
              {
                students.filter(item => item.score > 100).slice(0, 2).map(item => {
                  return (
                    <div className="item" key={item.id}>
                      <h2>学号: {item.id}</h2>
                      <h3>姓名: {item.name}</h3>
                      <h1>分数: {item.score}</h1>
                    </div>
                  )
                })
              }
            </div>
          </div>

	// 1.定义App根组件
    class App extends React.Component {
      constructor() {
        super()
        this.state = {
          movies: ["星际穿越", "盗梦空间", "大话西游", "流浪地球"],
          currentIndex: 0
        }
      }

      itemClick(index) {
        this.setState({ currentIndex: index })
      }

      render() {
        const { movies, currentIndex } = this.state

        return (
          <div>
            <ul>
              { 
                movies.map((item, index) => {
                  return (
                    <li
                      className={ currentIndex === index ? 'active': '' }
                      key={item}
                      onClick={() => this.itemClick(index)}
                    >
                      {item}
                    </li>
                  )
                }) 
              }
            </ul>
          </div>
        )
      }
    }

    // 2.创建root并且渲染App组件
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)

// 1.定义App根组件
    class App extends React.Component {
      constructor() {
        super()
        this.state = {
          movies: ["星际穿越", "盗梦空间", "大话西游", "流浪地球"],
          currentIndex: 0
        }
      }

      itemClick(index) {
        this.setState({ currentIndex: index })
      }

      render() {
        const { movies, currentIndex } = this.state

        const liEls = movies.map((item, index) => {
          return (
            <li
              className={ currentIndex === index ? 'active': '' }
              key={item}
              onClick={() => this.itemClick(index)}
            >
              {item}
            </li>
          )
        }) 

        return (
          <div>
            <ul>{liEls}</ul>
          </div>
        )
      }
    }

    // 2.创建root并且渲染App组件
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)

文章来源:https://blog.csdn.net/ASHIYI66/article/details/134604119
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！