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

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 2021-12-21 学习记录--React-组件实例三大核心属性：state、props、refs -> 正文阅读

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

一、组件实例三大核心属性之一：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>

二、组件实例三大核心属性之二：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>

三、组件实例三大核心属性之三：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>