2021-12-21 学习记录--React-组件实例三大核心属性：state、props、refs

已于 2022-05-27 17:58:42 修改
阅读量525 收藏 1
点赞数 2
分类专栏： 学习-React 文章标签： 前端 react.js
于 2021-12-27 22:08:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48850734/article/details/122063347
版权

一、组件实例三大核心属性之一：state

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 是做移动端适配的，想加入就加入；不想加入就删除 -->
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
  <title>2_state的简写方式</title>
</head>

<body>

<!-- 准备好一个“容器” -->
<div id="test"></div>


<!--
    注意1：react核心库（react.development.js） 必须在 react-dom.development.js 之前引入
 -->
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>


<!--
    实现效果：点击文字“今天天气很炎热，微风”，文字中的“炎热”切换成“凉爽”，再点击，文字中的“凉爽”又变成了“炎热”，依次循环往复
-->


<script type="text/babel"> /* 注意2：此处一定要写babel，表示里面写的不是js，而是jsx，是通过babel将jsx转为js的 */

// 1.创建类式组件
class Weather extends React.Component {

  // 初始化状态(赋值语句)
  state = {isHot:true,wind:'微风'};

  render() {
    // 组件中render方法中的this为组件实例对象
    const {isHot,wind} = this.state; // 相当于const {isHot} = {isHot:true}; -> 将等号后面部分取名为obj，相当于 const isHot = obj.isHot

    // 这儿的changeWeather后面不能加小括号，不然一来就调用该函数了，并且因为该函数的的返回值是undefined，所以点击事件也起不了作用了
    return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'},{wind}</h1>
  }

  // 自定义方法(要用赋值语句的形式+箭头函数，因为：1.类中可以直接写赋值语句，比如a=1；2.箭头函数没有自己的this，它的this是继承而来，其this指向往外找)
  changeWeather = () => {
    // 获取原来的isHot值
    const {isHot} = this.state; // 相当于 const isHot = this.state.isHot;

    // 将原来的isHot值取反，再赋值给this.state.isHot
    /*
        严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！（需借助一个内置的API去更改,即setState）
            this.state.isHot = !isHot; // 这是错误的写法

        严重注意：状态(state)必须通过setState进行修改，且修改是一种合并，不是替换。下面即正确写法
    */
    this.setState({
      isHot: !isHot,
    })
  }

}

// 2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))

</script>

</body>

</html>

【补充举例】 用state里的内容在render中进行遍历：
在这里插入图片描述

二、组件实例三大核心属性之二：props

1、类式组件使用props
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 是做移动端适配的，想加入就加入；不想加入就删除 -->
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
  <title>3_props的简写方式</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>

<!--
    注意1：react核心库（react.development.js） 必须在 react-dom.development.js 之前引入
 -->
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 引入prop-types，用于对组件标签属性进行限制 -->
<script type="text/javascript" src="../js/prop-types.js"></script>

<script type="text/babel"> /* 注意2：此处一定要写babel，表示里面写的不是js，而是jsx，是通过babel将jsx转为js的 */
  // 创建类式组件
  class Person extends React.Component {

  // 需求：自定义用来显示一个人员信息的组件
    // 1). 姓名必须指定，且为字符串类型;
    // 2). 性别为字符串类型，如果性别没有指定，默认为男
    // 3). 年龄为数字类型，默认值为18

    // 对props进行限制时，可放在类里面，在其前加个static即可
    // 对标签属性进行类型、必要性的限制
    static propTypes = {
      name: PropTypes.string.isRequired, // 姓名必须指定，且为字符串类型
      sex: PropTypes.string, // 性别为字符串类型
      age: PropTypes.number, // 年龄为数值类型
      speak:PropTypes.func, // func表示传函数类型
    }

    // 指定默认标签属性值
    static defaultProps = { // 设置未传值时的默认值
      sex: '男', // 如果性别没有指定，默认为男
      age: 18, // 如果年龄没有指定，默认为18
    }

    // render必须写，且有返回值
    render() {
      // 组件中render方法中的this为组件实例对象
      console.log(this);
      console.log(this.props);
      // es6-对象解构
      const {name,age,sex} = this.props;

      // props是只读的
      // this.props.name = 'jack' // 此行代码会报错，因为props是只读的

      return (
          <ul>
            <li>姓名：{name}</li>
            <li>性别：{sex}</li>
            <li>年龄：{age+1}</li>
          </ul>
      )
    }

  }

  // 渲染组件到页面
  // 第一种写法
  ReactDOM.render(<Person name="tom" sex="女" speak={speak}/>,document.getElementById('test1'));
  ReactDOM.render(<Person name="jerry" age={19} />,document.getElementById('test2'));
  // 第二种写法
  const p = {name:'老刘',age:18,sex:'女'}
  console.log(...p); // 输出没有内容，因为通过babel+react确实可以让展开运算符展开一个对象滴，但是不允许你随便使用
  // 这儿的{...p}里的大括号并不是表示赋值，而是表示里面装js表达式，然后这儿的...p是展开运算符，通过babel+react确实可以让展开运算符展开一个对象滴，但是不允许你随便使用
  ReactDOM.render(<Person {...p}/>,document.getElementById('test3'));

  function speak() {
    console.log('我说话了');
  }
</script>

</body>
</html>
2、函数式组件使用props

【组件实例三大核心属性：state、props、refs中，函数式组件只能使用props】

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 是做移动端适配的，想加入就加入；不想加入就删除 -->
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
  <title>4_函数式组件使用props</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>

<!--
    注意1：react核心库（react.development.js） 必须在 react-dom.development.js 之前引入
 -->
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 引入prop-types，用于对组件标签属性进行限制 -->
<script type="text/javascript" src="../js/prop-types.js"></script>

<script type="text/babel"> /* 注意2：此处一定要写babel，表示里面写的不是js，而是jsx，是通过babel将jsx转为js的 */

  // 创建函数式组件
  function Person(props) { // 函数式组件可以使用props,但是不能使用state或refs
    // es6-解构赋值
    const {name,sex,age} = props;
    console.log(props)
    return (
        <ul>
          <li>姓名：{name}</li>
          <li>性别：{sex}</li>
          <li>年龄：{age}</li>
        </ul>
    )
  }

  // 需求：自定义用来显示一个人员信息的组件
    // 1). 姓名必须指定，且为字符串类型;
    // 2). 性别为字符串类型，如果性别没有指定，默认为男
    // 3). 年龄为数字类型，默认值为18

  // 对标签属性进行类型、必要性的限制
  Person.propTypes = {
    name: PropTypes.string.isRequired, // 姓名必须指定，且为字符串类型
    sex: PropTypes.string, // 性别为字符串类型
    age: PropTypes.number, // 年龄为数值类型
  }

  // 指定默认标签属性值
  Person.defaultProps = { // 设置未传值时的默认值
    sex: '男', // 如果性别没有指定，默认为男
    age: 18, // 如果年龄没有指定，默认为18
  }


// 渲染组件到页面
  ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'));

</script>

</body>
</html>
【补充】3、父组件通过props向子组件传递值

父组件
在这里插入图片描述
子组件
在这里插入图片描述

三、组件实例三大核心属性之三：refs

1、字符串形式的ref【过时】
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 是做移动端适配的，想加入就加入；不想加入就删除 -->
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
  <title>1_字符串形式的ref(过时)</title>

  <style>

  </style>

</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>

<!--
    注意1：react核心库（react.development.js） 必须在 react-dom.development.js 之前引入
 -->
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel"> /* 注意2：此处一定要写babel，表示里面写的不是js，而是jsx，是通过babel将jsx转为js的 */
  // 创建组件
  class Demo extends React.Component {

    // 点击展示左侧输入框的数据
    showData = () => {
      console.log(this); // 这儿的this是类Demo的实例对象

      const {input1} = this.refs;
      alert(input1.value);
    }

    // 右侧输入框失去焦点后展示其输入框里的数据
    showData2 = () => {
      console.log(this); // 这儿的this是类Demo的实例对象

      const {input2} = this.refs;
      alert(input2.value);
    }

    render() {
      return (
          <div>
            <input ref="input1" type="text" placeholder="点击按钮提示数据" />&nbsp;
            <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
            <input ref="input2" onBlur={this.showData2} ref="input2" type="text" placeholder="失去焦点提示数据"/>
          </div>
      )
    }
  }
  // 渲染组件到页面
  ReactDOM.render(<Demo/>,document.getElementById('test'));
</script>

</body>
</html>
2、回调函数形式的ref
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 是做移动端适配的，想加入就加入；不想加入就删除 -->
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
  <title>2_回调函数形式的ref</title>

  <style>

  </style>

</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>

<!--
    注意1：react核心库（react.development.js） 必须在 react-dom.development.js 之前引入
 -->
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel"> /* 注意2：此处一定要写babel，表示里面写的不是js，而是jsx，是通过babel将jsx转为js的 */
  // 创建组件
  class Demo extends React.Component {

    // 点击展示左侧输入框的数据
    showData = () => {
      console.log(this); // 这儿的this是类Demo的实例对象

      const {input1} = this;
      alert(input1.value);
    }

    // 右侧输入框失去焦点后展示其输入框里的数据
    showData2 = () => {
      console.log(this); // 这儿的this是类Demo的实例对象

      const {input2} = this;
      alert(input2.value);
    }

    render() {
      return (
          <div>
            <input ref={currentNode => this.input1 = currentNode} type="text" placeholder="点击按钮提示数据" />&nbsp;
            <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
            <input ref={currentNode => this.input2 = currentNode} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
          </div>
      )
    }
  }
  // 渲染组件到页面
  ReactDOM.render(<Demo/>,document.getElementById('test'));
</script>

</body>
</html>
3、createRef的使用
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 是做移动端适配的，想加入就加入；不想加入就删除 -->
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
  <title>4_createRef的使用</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>

<!--
    注意1：react核心库（react.development.js） 必须在 react-dom.development.js 之前引入
 -->
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel"> /* 注意2：此处一定要写babel，表示里面写的不是js，而是jsx，是通过babel将jsx转为js的 */
  // 创建组件
  class Demo extends React.Component {

    /*
      React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点，该容器是“专人专用”的
    */
    myRef = React.createRef();
    myRef2 = React.createRef();

    // 点击展示左侧输入框的数据
    showData = () => {
      // console.log(this.myRef);
      console.log(this.myRef.current); // 获取到input的DOM节点 <input type="text" placeholder="点击按钮提示数据" />
      alert(this.myRef.current.value);
    }

    // 右侧输入框失去焦点后展示其输入框里的数据
    showData2 = () => {
      console.log(this.myRef2.current); // 获取到input的DOM节点 <input type="text" placeholder="失去焦点提示数据"/>
      alert(this.myRef2.current.value);
    }

    render() {
      return (
          <div>
            <input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />&nbsp;
            <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
            <input ref={this.myRef2} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
          </div>
      )
    }
  }
  // 渲染组件到页面
  ReactDOM.render(<Demo/>,document.getElementById('test'));
</script>

</body>
</html>

These are bilibili尚硅谷React学习视频的 学习笔记~

小呀小萝卜儿
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react核心文件和中文文档.rar
04-19
react的核心库文件，前端开发的利器。用于构建用户界面的 JavaScript 库，声明式 React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。组件化 创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。
react三大重要属性 — state、props、refs
halo1416的博客
04-19 564
前提：请注意查看实例代码中的注释哦 一、属性之state 实例： <script type="text/babel"> /* 需求: 自定义组件, 功能说明如下 1. 显示h2标题, 初始文本为: AAAA 2. 点击标题更新为: BBBB */ class Like extends React.Component { constr...
React-组件三大核心属性: state、props、refs
weixin_53412458的博客
02-28 1193
1、state state是组件对象最重要的属性, 值是对象.React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。 例子： //1.创建组件 class Weather extends React.Component{ //初始化状态 state = {isHot:false,wind:'微风'
React组件三大核心属性state、props、refs
xiaofiy的博客
09-03 300
一、state 1.state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合) 2.组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件) 3.注意 3.1.组件中render方法中的this为组件实例对象 3.2.组件自定义的方法中this为undefined，如何解决？ a)强制绑定this: 通过函数对象的bind() b)箭头函数 3.3.状态数据，不能直接修改或更新 // 定义初始状态 state = {count:0,isHot:false
React学习三 —— react组件的三大属性（state、props、refs）
qq_51574759的博客
10-06 1016
React组件有很多属性，在其中有三个属性最为核心和重要： - state - props - refs state让你可以通过数据驱动视图，让视图自动根据数据的改变而改变。 props可以提高组件的灵活性，通过外界传值让组件根据用户特性而呈现不同的视图。 refs能够减少用户对DOM的直接操作，而可以通过获取代理节点而提高开发效率和页面性能。
react-workshop：这是一个学习如何构建React应用程序的研讨会
01-28
7. **Refs**：Refs提供了一种方式直接访问DOM元素或React组件实例，这对于实现如动画效果、表单控件操作等需要直接操作DOM的场景非常有用。 8. **Context API**：React的Context API允许你在组件树中传递数据，而...
react-类似LinkedState但用于Refs支持Preact与React
08-14
在React和Preact这样的JavaScript库中，`state`和`props`是组件间通信的核心机制。然而，有时候我们可能需要直接访问或修改组件内部的DOM元素或者实例，这时候`refs`就显得尤为重要。`LinkedState`是React的一个实用...
前端大厂最新面试题-React refs.docx
最新发布
06-06
React中的Refs（引用）是一种机制，它允许开发者在React组件中直接访问DOM节点或React组件实例。这在处理特定交互、动画或者与第三方库集成时非常有用。在React中，有三种主要的方式来创建和使用Refs： 1. **字符串...
Platzi-Video:用react.js制作的视频播放器
04-27
React组件有自己的状态（`state`）和属性（`props`）。状态是组件内部数据的容器，当状态改变时，组件会自动重新渲染。事件处理则用于响应用户的交互，比如播放、暂停、快进等操作。 `Platzi-Video-master`文件夹...
egghead-react-tutorials:这是egghead.io的react教程部分中的react练习的回购
05-08
1. **React基础知识**：包括React组件、状态（state）和属性（props）、生命周期方法等。 2. **JSX**：学习如何使用JSX在JavaScript中创建和操作元素。 3. **状态管理**：了解如何处理组件的状态以及何时使用`...
React的三大核心 (state , props , refs)
fanfan176的博客
10-09 708
React的三大核心
React中的三种类型组件介绍
weixin_33733810的博客
11-23 1531
React从诞生到现在，越来越多的前端开发者喜欢上该框架，其原因有很多，其中一个主要的原因是因为它的组件很灵活，而本博客主要介绍React的三种类型的组件：受控类型，无状态类型，高阶类型。 在讲组件之前，先介绍一下React组件的两个重要特性： props:组件属性，专门用来连接父子组件间通信，父组件传输父类成员，子组件可以利用但不能编...
react中三大核心属性
m0_52518047的博客
04-04 205
1.state的基本使用 <script type="text/babel"> // 1.创建组件 class Weather extends React.Component{ constructor(props) { super(props) this.state = { isHot: true, wind: '
react三大核心属性
Nikki_u的博客
05-30 484
react三大核心属性之state 1、state是组件对象最重要的属性，值是对象（可以包含多个key-value的组合） 2、组件被称为“状态机”，通过更新组件的state来对应更多的页面显示（重新渲染组件） 3、react核心理念状态不可变（专业！！） class MyComponent extends React.Component{ constructor(props){ super(props) this.state={isHot:false}
React学习笔记（一）：组件三大核心属性、组件的生命周期
hxt的博客
02-13 423
1、React入门 1）、hello react <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello_react</title> </head> <body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 引入rea
React入门到组件的三大核心
weixin_52137798的博客
07-26 518
React简介 官网 1.英文官网: https://reactjs.org/ 2.中文官网: https://react.docschina.org/ 介绍描述 1.用于动态构建用户界面的 JavaScript 库(只关注于视图) 2.由Facebook开源 React的特点 1.声明式编码 2.组件化编码 3.React Native 编写原生应用 4.高效（优秀的Diffing算法） React高效的原因 1.使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。 2.DOM Diffin
React中几个核心的概念 --Y.
小烨！
08-10 3243
虚拟DOM（Virtual Document Object Model） DOM的本质是什么：浏览器中的概念，用JS对象来表示 页面上的元素，并提供了操作 DOM 对象的API； 什么是React中的虚拟DOM：是框架中的概念，是程序员 用JS对象来模拟 页面上的 DOM 和 DOM嵌套； 为什么要实现虚拟DOM（虚拟DOM的目的）：为了实现页面中， DOM 元素的高效更新 DOM和虚拟DOM...
React 三大仓库（Dva 、mobx 、Redux）
ZhaoYulin6的博客
02-20 1982
Dva:数据状态管理库 mobx：响应式管理 Redux:函数式管理 1.Dva详解 1.使用dva脚手架（dva-cli）快速构建React项目 npm install -g dva-cli 2.定义model 先设计 model 设计 component 连接两者（model 和 component） 2.1 dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions 。 .
React：核心库引入与JSX语法
席木木的博客
10-04 1022
React官网：React是用于构建用户界面的JavaScript库，其含义就是：React框架关注点在于前端用户界面。相比原生JavaScript开发网页页面，频繁操作原生DOM元素的方式（像：查找、获取、增加、删除、更新等），React框架依靠其底层的Diffing 算法，具有更好的性能优势。
React-Native入门与实战：打造原生体验的跨平台应用
"React-Native技术分享，涵盖了React-Native的诞生背景、开发特点、开发模式以及实践应用，适合React-Native初级开发者学习基础概念。" React-Native是由Facebook开源的跨平台UI开发框架，旨在提供原生应用的交互...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小呀小萝卜儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值