React组件三大属性之state,props,refs

目录
  • 1.1基本理解和使用
    • 1.1.1 使用React开发者工具调试
    • 1.1.2 定义组件的方式
    • 1.1.3 注意
    • 1.1.4 渲染类组件标签的基本流程
  • 1.2 组件实例的三大核心属性之一:state
    • 1.2.1 理解
    • 1.2.2 案例
    • 1.2.3 在类式组件使用state
    • 1.2.4 在类式组件使用state的简写方式
    • 1.2.3 强烈注意
  • 1.3 组件实例的三大核心属性之一:props
    • 1.3.1 理解
    • 1.3.3 作用
    • 1.3.4 在类式组件使用props
    • 1.3.5 在函数式组件使用props
  • 1.4 组件实例的三大核心属性之一:refs与事件处理
    • 1.4.1 理解
    • 1.4.2 效果
    • 1.4.3 字符串形式的ref
    • 1.4.4 回调形式的ref
    • 1.4.5 回调ref中回调执行次数的问题(class的绑定函数)
    • 1.4.6 createRef创建ref容器
    • 1.4.7 事件处理
  • 1.5 收集表单数据
    • 1.5.1 理解
    • 1.5.2 案例

1.1基本理解和使用

1.1.1 使用React开发者工具调试

React Developer Tools

1.1.2 定义组件的方式

Ⅰ.函数式组件:

<script type="text/babel">
    // 1.创建函数式组件  (首字母必须大写)
    function MyComponent() { //(函数必须有返回值)
        console.log(this)  //undefined (本来this指向的是window,但是由于babel翻译完之后启用es5的严格模式,自定义的函数里的this不让指向window)
      return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
    }
    // 2.渲染组件到页面  (必须写组件标签)
    ReactDOM.render(<MyComponent />, document.getElementById('test'))
  </script>

执行了ReactDOM.render(…之后发生了什么?

1.React解析组件标签,找到了MyComponent组件。

2.发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真实DOM,随后呈现在页面中。

类的基本知识复习移步到vscode

Ⅱ.类式组件:

复杂组件:如果组件是有状态的,那么就是复杂组件。

<script type="text/babel">
    // 1.创建类式组件
    class MyComponent extends React.Component {
      render() {
        // render是放在哪里的?——MyComponent的原型对象上,供实例使用
        // render中的this是谁?——MyComponent的实例对象 <=> MyComponent组件实例对象
        console.log('render中的this是谁:', this)
        return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
      }
    }
    // 渲染组件到页面
    ReactDOM.render(<MyComponent />, document.getElementById('test'))

执行了ReactDOM.render(…之后发生了什么?

1.React解析组件标签,找到了MyComponent组件。

2.发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用到原型上的render方法。

3.将render返回的虚拟DOM转为真实DOM,随后呈现在页面中。

1.1.3 注意

  • 组件名必须首字母大写
  • 虚拟DOM元素只能有一个根标签
  • 虚拟DOM元素必须有结束标签

1.1.4 渲染类组件标签的基本流程

  • React内部会创建组件实例对象
  • 调用render()返回得到虚拟DOM, 并解析为真实DOM
  • 插入到指定的页面元素内部

1.2 组件实例的三大核心属性之一:state

1.2.1 理解

  • state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
  • 组件被称为"状态机", 通过更新组件的state,来更新对应的页面显示(重新渲染组件)
  • 数据存放在状态里,来驱动对应页面的显示

1.2.2 案例

需求: 定义一个展示天气信息的组件

  • 默认展示天气炎热 或 凉爽
  • 击文字切换天气

效果如下:

1.2.3 在类式组件使用state

<script type="text/babel">
    // 1.创建组件
    class Weather extends React.Component {
      // 借助构造器初始化状态
      // 构造器调用了几次?————1次
      constructor(props) {
        console.log('constructor')
        super(props)
        // 初始化状态
        this.state = { isHot: true, wind: '微风' }
        //解决changeWeather中this指向的问题
        this.changeWeather = this.changeWeather.bind(this)
        // 这是一个赋值语句,右边的this.changeWeather是指顺着原型链找到了changeWeather(),然后调用bind(),bind可以生成一个新的函数,改变this指向。括号中为传入的this,指得就是类中的实例对象
        // 拿到了原型上的changeWeather,通过bind生成了一个新的changeWeather挂在实例自身
      }
      // render调用了几次?————1+n次 1是初始化的那次,n是状态更新的次数
      render() {
        console.log('render')
        // 读取状态
        const { isHot, wind } = this.state
        //        react:将changeWeather调用的返回值赋值给onClick,不用加括号
        //        原生js:onclick时调用changeWeather函数,要加括号
        return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'},{wind}</h1>
        //    含义是:这是一个赋值语句,把右边这个函数交给onClick作为回调,
        //            等你点击的时候,react帮你调changeWeather()函数
      }

      // changeWeather调用了几次?————点几次调几次
      changeWeather() {
        console.log('changeWeather')
        // changeWeather放在哪里?——Weather的原型对象上,供实例使用
        // 通过Weather实例调用changeWeather时,changeWeather中的this就是Weather实例
        console.log(this)   //undefined
        // 因为changeWeather不是通过实例调用的,是直接调用,所以this不会指向 实例对象
        // 那么 changeWeather 的this 是指向 undefined还是 window呢
        // 是 undefined 因为 类中的局部函数默认开启了严格模式(类自动开的,与babel无关),所以不能指向 window

        // 获取原来的isHot值
        const isHot = this.state.isHot
        // 严重注意:状态(state)里的数据不能直接进行更改,下面这行就是直接更改,react不认可!!!
        // this.state.isHot = !isHot  错误写法

        // 严重注意:状态必须通过setState进行修改,并且修改是一种合并,不是替换,只修改了isHot,wind不会丢失
        this.setState({ isHot: !isHot })
      }
    }
    // 2.渲染组件到页面
    ReactDOM.render(<Weather />, document.getElementById('test'))

  </script>

1.2.4 在类式组件使用state的简写方式

<script type="text/babel">
    // 1.创建组件
    class Weather extends React.Component {
      // 初始化状态时直接在类里面写赋值语句
      state = { isHot: true, wind: '微风' }
      render() {
        const { isHot, wind } = this.state
        return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'},{wind}</h1>
      }

      // 自定义方法 ————在用类去创建一个组件时,组件里所有自定义的方法都要用 赋值语句+箭头函数 的形式
      changeWeather = () => {   //箭头函数没有this,箭头函数内的this指向其外侧
        const isHot = this.state.isHot
        this.setState({ isHot: !isHot })
        console.log(this)
      }
    }
    ReactDOM.render(<Weather />, document.getElementById('test'))
  </script>

1.2.3 强烈注意

  • 组件中render方法中的this组件实例对象
  • 组件自定义的方法中this为undefined,如何解决?

①强制绑定this:通过函数对象的bind()
②箭头函数 ()=>{}

状态数据,不能直接修改或更新,状态必须通过setState进行修改

1.3 组件实例的三大核心属性之一:props

1.3.1 理解

  • 每个组件对象都会有props(properties 的简写)属性
  • 组件标签所有属性都保存在props中 1.3.2 案例

需求: 自定义用来显示一个人员信息的组件

  • 姓名必须指定,且为字符串类型
  • 性别为字符串类型,如果性别没有指定,默认为男
  • 年龄为字符串类型,且为数字类型,默认值为18

效果如下:

1.3.3 作用

  • 通过标签属性从组件外向组件内传递变化的数据
  • 注意: 组件内部不要修改props数据,因为props是只读的

1.3.4 在类式组件使用props

先从内部读取某个属性值:

//实例对象身上有个属性props,需要传值进去,那怎么传呢?html标签能写标签属性(key:value),那么组件标签(<Person/>)也能写属性
// 解构赋值 提前从props身上拿到这三个属性
const { name, age, sex } = this.props

对props中的属性值进行类型限制和必要性限制:

第一种方式(React v15.5 开始已弃用):

Person.propTypes = {
 name: React.PropTypes.string.isRequired,
 age: React.PropTypes.number
}

第二种方式(新):使用prop-types库进限制(需要引入prop-types库)

//给Person加上propTypes属性,react就能帮你限制了
//写在Person类外面
Person.propTypes = {
  // 具体的propTypes规则,要去PropTypes(React里面内置的一个属性)里面找
  name: PropTypes.string.isRequired, //限制name必传,且为字符串
  age: PropTypes.number //限制age为数值
}

在类式组件使用props的简写方式

// 用static表示给类自身加上一个propTypes和defaultProps属性,而不是给类的实例对象加属性
// 写在Person类里面
static propTypes = {
   name: PropTypes.string.isRequired,  //限制name必传,且为字符串
   sex: PropTypes.string, //限制sex为字符串
   age: PropTypes.number, //限制age为数值
 }

static defaultProps = {
   sex: '男',  //sex默认值为不男不女
   age: 18  //age默认值为18
 }

扩展属性: 将对象的所有属性通过props传递

// 展开运算符在对对象使用时,应当注意以{}包裹起来
<Person {...person}/>
//...展开运算符具体运用看vscode

默认属性值:

Person.defaultProps = {
  age: 18, //age默认值为18
  sex:'男'//sex默认值为男
}

组件类的构造函数:

//开发中很少写构造器,能省则省
// 构造器是否接收props,是否传递给super,取决于:是否希望在构造器中通过this访问props
constructor(props){
  // 只要写了构造器,就一定要调用super(),一定要传props
  super(props)
  console.log(props)//打印所有属性
}

1.3.5 在函数式组件使用props

<script type="text/babel">
    // 创建组件
    //函数式组件能接收参数
    function Person(props) {
      // console.log(props)
      const { name, sex, age } = props
      return (
        <ul>
          <li>姓名:{name}</li>
          <li>性别:{sex}</li>
          <li>年龄:{age}</li>
        </ul>
      )
    }
    Person.propTypes = {
      name: PropTypes.string.isRequired,  //限制name必传,且为字符串
      sex: PropTypes.string, //限制sex为字符串
      age: PropTypes.number, //限制age为数值
    }

    Person.defaultProps = {
      sex: '男',  //sex默认值为不男不女
      age: 18  //age默认值为18
    }
    ReactDOM.render(<Person name='旭旭' />, document.getElementById('test'))
  </script>

1.4 组件实例的三大核心属性之一:refs与事件处理

1.4.1 理解

组件内的标签可以定义ref属性来标识自己(相当于原生里是id)

1.4.2 效果

需求: 自定义组件, 功能说明如下:

  • 点击按钮, 提示第一个输入框中的值
  • 当第2个输入框失去焦点时, 提示这个输入框中的值

1.4.3 字符串形式的ref

<script type="text/babel">
    // 创建组件
    class Demo extends React.Component {
      // 展示左侧输入框的数据
      showData = () => {
        const { input1 } = this.refs
        alert(input1.value)
      }
      // 展示右侧输入框的数据
      showData2 = () => {
        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} type="text" placeholder="失去焦点提示数据" />
          </div>
        )
      }
    }
    //渲染组件
    ReactDOM.render(<Demo />, document.getElementById('test'))
  </script>

过时的API:String 类型的 Refs

如果你之前使用过 React,你可能了解过之前的 API 中的 string 类型的 ref 属性,例如 "textInput"。你可以通过 this.refs.textInput 来访问 DOM 节点。我们不建议使用它,因为 string 类型的 refs 存在 一些问题。它已过时并可能会在未来的版本被移除。

效果如下:

1.4.4 回调形式的ref

<script type="text/babel">
    // 创建组件
    class Demo extends React.Component {
      // 展示左侧输入框的数据
      showData = () => {
        const { input1 } = this
        alert(input1.value)
      }
      // 展示右侧输入框的数据
      showData2 = () => {
        const { input2 } = this
        alert(input2.value)
      }

      // 回调函数的特点:你定义的,别人调的,最终执行了
      // 回调函数的参数正是ref当前所处的那个input节点
      render() {
        return (
          <div>
            {/* 代码执行步骤: */}
            {/* React加载Demo组件时,执行render函数内的jsx代码,发现input中有ref属性,属性内容是一个箭头函数,React就会帮我们调用这个回调函数,并且把当前的DOM传进这个函数,这样就可以接收到当前的DOM节点了,并把这个DOM放在组件实例自身上 */}
            {/* 箭头函数接收到参数(当前的DOM节点)命名为(currentNode),将currentNode赋值给实例对象下的input1这个属性 */}
            {/* 箭头函数只有一个参数可以省略'()',箭头函数右边只有一条函数体可以省略'{}' */}
            {/*<input ref={currentNode => this.input1 = currentNode} type="<text>" placeholder="点击按钮提示数据" />&nbsp;*/}
            <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>

效果如下:

1.4.5 回调ref中回调执行次数的问题(class的绑定函数)

<script type="text/babel">
    // 创建组件
    class Demo extends React.Component {

      state = { isHot: true }

      showInfo = () => {
        const { input1 } = this
        alert(input1.value)
      }

      changeWeather = () => {
        // 获取原来的状态
        const { isHot } = this.state
        // 更新状态
        this.setState({ isHot: !isHot })
      }

      savaInput = (currentNode) => {
        this.input1 = currentNode;
      }

      render() {
        const { isHot } = this.state
        return (
          <div>
            <h1>今天天气很{isHot ? '炎热' : '凉爽'}</h1>
            {/* React在更新组件时,会先传入null调用一次ref中的回调,以清空之前的ref;然后再传入参数currentNode,以调用第二次。每更新一次组件,ref中的回调函数就会被调用两次,一次传入null,一次传入参数currentNode。为了应对这种情况的出现,官方建议将ref的回调函数定义成 class 的绑定函数 的方式去避免上述的问题。 */}

            {/*内联函数*/}
            {/*<input ref={(currentNode) => { this.input1 = currentNode; console.log('@', currentNode) }} type="text" /><br /><br />*/}
            <input ref={this.savaInput} type="text" /><br /><br />
            <button onClick={this.showInfo}>点我提示输入的数据</button>&nbsp;
            <button onClick={this.changeWeather}>点我切换天气</button>
          </div>
        )
      }
    }
    //渲染组件
    ReactDOM.render(<Demo />, document.getElementById('test'))
  </script>

React在更新组件时,会先传入null调用一次ref中的回调,以清空之前的ref;然后再传入参数currentNode,以调用第二次。每更新一次组件,ref中的回调函数就会被调用两次,一次传入null,一次传入参数currentNode。为了应对这种情况的出现,官方建议将ref的回调函数定义成 class 的绑定函数 的方式去避免上述的问题。

效果如下:

1.4.6 createRef创建ref容器

<script type="text/babel">
    // 创建组件
    class Demo extends React.Component {
      myRef = React.createRef()
      myRef2 = React.createRef()
      /* React.createRef调用后可以返回一个容器,该容器可以存储被ref所标识的节点,该容器是“专人专用”的,也就是,调用React.createRef()创建了一个容器,通过赋值语句赋值给实例自身名为myRef的属性上 */
      // 展示左侧输入框的数据
      showData = () => {
        // console.log(this.myRef)
        alert(this.myRef.current.value)
      }
      // 展示右侧输入框的数据
      showData2 = () => {
        alert(this.myRef2.current.value)
      }

      // 回调函数的特点:你定义的,别人调的,最终执行了
      // 回调函数的参数正是ref当前所处的那个input节点
      render() {
        return (
          <div>
            {/* React执行render函数中的jsx代码时,
            发现input上有一个ref属性而且是通过createRef方法创建的,
            React就会把当前ref属性所在的DOM节点放到之前创建的那个容器上,
            也就是把当前input这个DOM节点放到了实例自身名为myRef的容器上 */}
            {/* 可以简写成ref={this.myRef = React.createRef()} */}
            <input ref={this.myRef} type="text" placeholder="点击按钮提示数据" /> &nbsp;
            <button onClick={this.showData}>点我提示左侧的数据</button> &nbsp;
            {/* 发生事件的元素正好是需要操作的元素本身,可以省略ref */}
            <input ref={this.myRef2} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" /> &nbsp;
          </div>
        )
      }
    }
    //渲染组件
    ReactDOM.render(<Demo />, document.getElementById('test'))
  </script>

效果如下:

1.4.7 事件处理

  • 通过onXxx属性指定事件处理函数(注意大小写)
  • React使用的是自定义(合成)事件, 而不是使用的原生DOM事件-------为了更好的兼容性
  • React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)--------为了高效

通过event.target得到发生事件的DOM元素对象------不要过度使用ref

<script type="text/babel">
    //  创建一个组件
    class Demo extends React.Component {
      showInfo = () => {
        alert(this.myRef.current.value)
      }
      showData = (event) => {
        // 传入的event是发生onBlur事件的事件源,也就是失去焦点提示数据的input框,
        // 通过event.target.value拿到input中的值
        alert(event.target.value)
      }
      render() {
        return (
          <div>
            <input ref={this.myRef = React.createRef()} type="text" placeholder="点击按钮提示数据" />&nbsp;
            <button onClick={this.showInfo}>点我提示左侧数据</button>&nbsp;
            <input onBlur={this.showData} type="text" placeholder="失去焦点提示数据" />
          </div>
        )
      }
    }

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

1.5 收集表单数据

1.5.1 理解

包含表单的组件分类

  • 受控组件
  • 非受控组件

1.5.2 案例

需求: 定义一个包含表单的组件

输入用户名密码后, 点击登录提示输入信息

效果如下:

Ⅰ.非受控组件

对input(以及页面中其他的一些输入型DOM)中输入的数据现用现取,就是非受控组件

<script type="text/babel">
    // 创建一个组件
    class Login extends React.Component {
      // handleSubmit函数中直接取出input中输入的数据(现用现取)
      handleSubmit = (event) => {
        event.preventDefault()     //阻止表单提交
        const { username, password } = this
        alert(`你输入的用户名是: ${username.value}, 你输入的密码是: ${password.value}`)
      }
      render() {
        return (
          // 对input(以及其他的一些输入型DOM)中输入的数据现用现取,就是非受控组件
          <form onSubmit={this.handleSubmit}>
            用户名:<input ref={(c) => { this.username = c }} type="text" name="username" />
            密码:<input ref={(c) => { this.password = c }} type="password" name="password" />
            {/* form中的button默认提交,点击后触发表单提交事件onSubmit */}
            <button>登录</button>
          </form>
        )
      }
    }
    // 渲染组件到页面
    ReactDOM.render(<Login />, document.getElementById('test'))
  </script>

Ⅱ.受控组件

页面中所有输入类的DOM(input框),随着用户的输入,能把输入的东西维护到状态里(state),等需要用时,直接从状态里面取出来,就是受控组件。(类似于vue里的双向绑定

<script type="text/babel">
    // 创建一个组件
    class Login extends React.Component {
      // 初始化状态
      state = { username: '', password: '' }

      // 保存用户名到状态中
      saveUsername = (event) => {
        this.setState({ username: event.target.value })
      }

      // 保存密码到状态中
      savePassword = (event) => {
        this.setState({ password: event.target.value })
      }

      // 表单提交的回调
      handleSubmit = (event) => {
        event.preventDefault()     //阻止表单提交
        const { username, password } = this.state
        alert(`你输入的用户名是: ${username}, 你输入的密码是: ${password}`)
      }

      /*
      受控组件:(能够省略ref)
      页面中所有输入类的DOM(input框),随着用户的输入,能把输入的东西维护到状态里(state),等需要用时,直接从状态里面取出来

      数据被onChange函数监听,只要输入型DOM数据一改变就触发onChange中指定的回调函数
      回调函数saveUsername和savePassword中对改变的数据进行保存,保存到state中,需要使用的时候才取出。
      */
      render() {
        return (
          <form onSubmit={this.handleSubmit}>
            用户名:<input onChange={this.saveUsername} type="text" name="username" />
            密码:<input onChange={this.savePassword} type="password" name="password" />
            <button>登录</button>
          </form>
        )
      }
    }
    // 渲染组件到页面
    ReactDOM.render(<Login />, document.getElementById('test'))
  </script>

到此这篇关于React组件三大属性之state,props,refs的文章就介绍到这了,更多相关React组件属性内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • React中refs的一些常见用法汇总

    目录 什么是Refs 一.String 类型的 Refs 二.回调 Refs 三.React.createRef() 四.useRef 五.Refs 与函数组件 总结 什么是Refs Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素. Ref转发是一项将ref自动通过组件传递到子组件的技巧. 通常用来获取DOM节点或者React元素实例的工具.在React中Refs提供了一种方式,允许用户访问dom节点或者在render方法中创建的React

  • 详解React中Props的浅对比

    上一周去面试的时候,面试官我PureComponent里是如何对比props的,概念已经牢记脑中,脱口而出就是浅对比,接着面试官问我是如何浅对比的,结果我就没回答上来. 趁着周末,再来看看源码里是如何实现的. 类组件的Props对比 类组件是否需要更新需要实现shouldComponentUpdate方法,通常讲的是如果继承的是PureComponent则会有一个默认浅对比的实现. // ReactBaseClasses.js function ComponentDummy() {} Compo

  • React中的Props类型校验和默认值详解

    目录 一.props规则校验 二.props默认值 1.函数式默认值 1.1 函数参数默认值(新版推荐) 1.2 defaultProps 设置默认值 2.类式默认值 2.1 defaultProps 2.2 类静态属性声明 总结 一.props规则校验 安装 prop-types 包 $ npm install prop-types 导入 propTypes 对象 import propTypes from 'prop-types'; 组件名.propTypes = {} 设置组件 传参规则

  • react的context和props详解

    目录 一.context 1. 使用场景 2. 使用步骤 3. 总结 二.props深入 1. children 属性 2. props 校验 3. props校验使用步骤 4. props校验约束规则 5. props默认值 总结 一.context 1. 使用场景 设想一个场景,假如我们要给子孙组件传值,应该怎么办呢? 如果使用props一层一层往下 传递的话,特别的繁琐! 更好的办法:使用context来帮助我们跨组件传递数据 2. 使用步骤 调用 React.createContext(

  • vue3的ref,computed,reactive和toRefs你都了解吗

    目录 1.ref 2.computed 3.reactive 4.toRefs 总结 在vue2中,data函数里返回的值直接为响应式的,但在vue3中我们需要使用一些函数才能达到这个效果. setup函数中拿不到vue的this 1.ref 本质为一个函数,输入参数为一个值(原始类型),返回响应式的对象 2.computed 本质为一个函数,输入参数是一个函数,可以将我们需要的值作为输入函数的返回值 例子:实现点击按钮,屏幕上的数加1 <template> <div id='app'&

  • React三大属性之props的使用详解

    上期讲了state,接下来讲讲props.props功能在于组件间通信(父子组件),首先说说在各种组件中的用法: 类组件 //父组件传值 class Father extends React.PureComponent{ render(){ return ( <Son value={"son"} /> ) } } class Son extends React.PureComponent{ render(){ return ( <div>this data is

  • React styled-components设置组件属性的方法

    问题 最近在试着用react做一个音乐播放器,在这之前其实并不了解styled-components,但由于使用css in js并且想实现hover效果,百度各种解决方案后发现了styled-components这个好东西,如果你看到了这篇博客,就证明你应该了解或者熟练运用styled-components了. 回到项目开发中,一个音乐播放器应该由多个组件组成,其中有一个list组件用于展示歌曲列表,就像这样 鹅...好像暴露了我的喜好... 每一列就是一个div(当然ul也是可以的),为了方

  • React组件三大属性之state,props,refs

    目录 1.1基本理解和使用 1.1.1 使用React开发者工具调试 1.1.2 定义组件的方式 1.1.3 注意 1.1.4 渲染类组件标签的基本流程 1.2 组件实例的三大核心属性之一:state 1.2.1 理解 1.2.2 案例 1.2.3 在类式组件使用state 1.2.4 在类式组件使用state的简写方式 1.2.3 强烈注意 1.3 组件实例的三大核心属性之一:props 1.3.1 理解 1.3.3 作用 1.3.4 在类式组件使用props 1.3.5 在函数式组件使用pr

  • React组件实例三大属性state props refs使用详解

    目录 一. State 1.概念 2.State的简单用法 3. JS绑定事件 4.react 绑定事件 5.react this指向问题 6.修改state值 7.代码简写 二.props 1.概念 2.传参的基础方法.运算符传参 三.refs 定义 字符串形式的ref.回调函数下ref.createRef 创建ref容器 一. State 1.概念 概念:state是组件对象最重要的属性,值是对象(可以包含多个key:value的组合),组件被称为状态机,通过更新组件的state来更新对应的

  • React 三大属性之state的使用详解

    React中很多地方需要用到数据,这在React中被叫做状态,我们需要一个专门管理状态的方法,于是state相关的就诞生了.state应该被要求有两个基本功能,一,能够存储一定的值,从而能被react使用,二,能够再它改变的时候被React监听到并且重新渲染.这里分别介绍一下在类和函数组件中state的写法: 类组件 class ClassComponent extends React.Component{ constructor(props){ super(props) } //可写可不写 r

  • React的三大属性你都知道吗

    目录 React三大属性 props 函数组件 类组件 state 有状态组件和无状态组件 setState props和state属性的区别 refs React.createRef ref的绑定 总结 React三大属性 props 组件是封闭的,接收外部数据应该通过props来实现 函数组件通过参数props来接收数据,props是一个对象: 类组件通过this.props接收数据. 传递数据:在组件标签上添加属性 函数组件 const Hello = (props) => { conso

  • React组件二次包装的具体实现

    目录 1. 类型声明 2. 默认属性 3. 自定义属性与属性透传 原生组件是对公共场景的抽象,若要契合实际业务往往需要对其进行二次包装.对组件进行二次包装一般需要进行包括不限于以下的步骤: 组件类型类型声明 自定义组件渲染逻辑 向原生组件透传属性 1. 类型声明 类型声明是组件二次包装过程中的第一步,项目中常见的方案是直接进行类型声明,例如通过Button组件包装个自定义的Button: import React, { CSSProperties } from "react"; imp

  • React组件封装中三大核心属性详细介绍

    目录 1.介绍 2.state 概念 演示 3.props 概念 props与state区别 4.refs 概念 refs种类 5.父子组件 什么是父子组件 父子组件之间传值 1.介绍 React组件中默认封装了很多属性,有的是提供给开发者操作的,其中有三个属性非常重要:state.props.refs. 2.state 概念 state是类组件的一个默认属性,用于标识类组件的状态,负责更新UI,让页面动态变化,当state变化时,组件将被重新渲染. 函数组件没有对象属性(babel默认开启了局

  • React三大属性之Refs的使用详解

    refs是React中用来取得某个JSX组件或者某个DOM中的一些状态值的时候,用来获取节点的方法.在React官方的解释中,它的适用范围如下: 管理焦点,文本选择或媒体播放. 触发强制动画. 集成第三方 DOM 库. React文档中再三强调,请不要过度使用refs,所以当我们可以用dom原生对象解决时,尽量不要使用refs 依照之前的写法,首先是给出类组件和函数组件中refs的写法 类组件 在类中,refs有三种方式,目前最常用的是回调的形式使用,分别进行演示 //直接定义refs,已废弃

  • React组件refs的使用详解

    ref顾名思义我们知道,其实它就可以被看座是一个组件的参考,也可以说是一个标识.作为组件的属性,其属性值可以是一个字符串也可以是一个函数. 其实,ref的使用不是必须的.即使是在其适用的场景中也不是非用不可的,因为使用ref实现的功能同样可以转化成其他的方法来实现.但是,既然ref有其适用的场景,那也就是说ref自有其优势.关于这一点和ref的适用场景,官方文档中是这样说的: 在从 render 方法中返回 UI 结构之后,你可能想冲出 React 虚拟 DOM 的限制,在 render 返回的

  • react开发教程之React 组件之间的通信方式

    这两天学习了React感觉组件通信这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 父子组件通讯 通讯手段 这是最常见的通信方式,父组件只需要将子组件需要的props传给子组件,子组件直接通过this.props来使用. 通讯内容 更多要提的是如何合理的设置子组件的props,要想将子组件设计成一个复用性强的通用组件,需要将能够复用的部分抽象出来,抽象出来的props有两种形成,一种是简单的变量,另一种是抽象出来处理某种逻辑函数. 以Header 组件为例 //HeaderBar.j

随机推荐