React学习日记5

020 props基本使用

使用props传值，在标签里面直接添加对应属性就可以了

<script type="text/babel">
    class Person extends React.Component{
      state = {}
      render(){
        //多级结构最好使用（）包起来
        const {name,age,sex} = this.props
        return (
          <ul>
            <li>name:{this.props.name}</li>
            <li>sex:{this.props.sex}</li>
            <li>age:{this.props.age}</li></ul>
        )
      }
    }
    ReactDOM.render(<Person name='Tom' age='15' sex='female'/>,document.getElementById('test'))
    ReactDOM.render(<Person name='xx' age='1ad' sex='male'/>,document.getElementById('test2'))
    ReactDOM.render(<Person name='dd' age='31' sex='female'/>,document.getElementById('test3'))

021 批量传递props

const p = {name:'Jack',age:'15',sex:'female'}
//通过...进行批量传值 
ReactDOM.render(<Person {...p}/>,document.getElementById('test2'))

不能够直接使用...运算符但是babe编译下可以这么写（仅适用于标签里面）

ps:原生js{...} 这样可以进行浅拷贝

022 对props进行限制

		// propRtpes是class的一个属性  PropTypes 通过引入的文件生成的一个全局对象
    Person.propTypes = {
      // 用来对标签属性进行限制
      name:PropTypes.string.isRequired ,//  .string表示必须是字符串类型 .isRequired表示必须填
      sex:PropTypes.string,//限制为字符串
      age:PropTypes.number,//限制为数字
      speak:PropTypes.func //限制为函数
    }
    // 表示标签属性默认值的限制
    Person.defaultProps = {
      sex:'不男不女'
    }
    // 在标签里面需要通过 {}传递非字符数据，{}里面的内容才会被认为是js类型的数据
    ReactDOM.render(<Person name='yy' age={15} speak={demo}/>,document.getElementById('test'))
    const p = {name:'Jack',age:'15',sex:'female'}
    //通过...进行批量传值 
    ReactDOM.render(<Person {...p}/>,document.getElementById('test2'))

通过设定Class里面的propsType来规定各项属性

通过引入PropsType来规定标签属性的类型和是否必须传入

通过设定class里面的defaultProps来设定默认标签属性

023 props的简写

props是只读的，不可更改 [单项数据流]

用static表示类的属性

<script type="text/babel">
    class Person extends React.Component{
      state = {}
      render(){
        //多级结构最好使用（）包起来
        const {name,age,sex} = this.props
        return (
          <ul>
            <li>name:{this.props.name}</li>
            <li>sex:{this.props.sex}</li>
            <li>age:{this.props.age}</li></ul>
        )
      }
      // 用static表示类的属性
     static propTypes = {
      name:PropTypes.string.isRequired ,//  .string表示必须是字符串类型 .isRequired表示必须填
      sex:PropTypes.string,//限制为字符串
      age:PropTypes.number,//限制为数字
      //speak:PropTypes.func //限制为函数
    }
      static defaultProps = {
        sex:'不男不女'
      }
    }
    ReactDOM.render(<Person name='yy' age={15} />,document.getElementById('test'))
    const p = {name:'Jack' ,age:14 ,sex:'female'}
    //通过...进行批量传值 
    ReactDOM.render(<Person {...p}/>,document.getElementById('test2'))
  </script>

024 类式组件中的构造器与props

类中的构造器如果不省略，

构造器是否接受props，是否传递给super，取决于是否希望在构造器中通过this访问props（几乎不用）

开发的时候还是几乎不写构造器。。。

025 函数式组件使用props

function Person(props){
      // 以对象的形式进行收集
      console.log(props);
      const {name,sex,age} = props
      return (
          <ul>
            <li>name:{name}</li>
            <li>sex:{sex}</li>
            <li>age:{age}</li>
          </ul>
        )
      }
    ReactDOM.render(<Person name='yy' age={15} sex='female' />,document.getElementById('test'))

函数式组件只能玩props，不能用state和refs

026 总结props

027 字符串形式的refs

组件里面的ref相当于给组件打一个表示类似于id

this.refs相当于拿到一个对象

字符串的形式refs已经不常用了

class Demo extends React.Component{
    render(){
      return (
        <div>
          <input ref = 'input1' type="text" placeholder = "点击按钮提示数据"/>&nbsp;
          <button  ref = 'input2' onClick = {this.showData}>点我提示左侧数据</button> &nbsp;
          <input ref = 'input3' onBlur={this.showData2} type="text" placeholder = "渲染组件到页面"/>&nbsp;
          </div>
      )
    }
    showData = ()=>{
      // 这里拿到的真实DOM 
      // console.log(this.refs.input1);
      const {input1} = this.refs 
      alert(input1.value)
    }
    showData2 = ()=>{
      const {input3} = this.refs
      alert(input3.value)
    }
  }
  ReactDOM.render(<Demo/>, document.getElementById('test'))

028-029 回调形式的refs

render(){
      return ( //  ref 属性值为一个回调函数 渲染的时候自动执行，使用箭头函数，参数为实例本身。this指向render作用域
              //   将input1 放入实例中
        <div>
          <input ref = {(currentNode)=>{this.input1 = currentNode}} type="text" placeholder = "点击按钮提示数据"/>&nbsp;
          <button  onClick = {this.showData}>点我提示左侧数据</button> &nbsp;
          <input ref = {currentNode=>this.input3 = currentNode}onBlur={this.showData2} type="text" placeholder = "渲染组件到页面"/>&nbsp;
          </div>
      )
    }
    showData = ()=>{
      const {input1} = this
      alert(input1.value)
    }
    showData2 = ()=>{
      const {input3} = this
      alert(input3.value)
    }
  }

ref 属性值为一个回调函数渲染的时候自动执行，使用箭头函数，参数为实例本身。this指向render作用域

如果ref回调函数是以内联函数的方式的定义的，在更新（render）的过程当中它会被执行两次，第一次传入参数null，第二次才真正传入结点【这一点这个不重要】，可以写成下面的形式规避这个问题

render(){
        const {isHot} = this.state
        return (
          <div>
            <h2>今天天气很{isHot?'炎热':'凉爽'}</h2>
            <button onClick ={this.change}>切换天气</button>
            {/*<input type="text" ref={c=>{this.input1 = c;console.log('@',c);}}/>*/}
            <input type="text" ref={this.saveInput}/>
            <button onClick = {this.showInfo}>点击我提示输入</button>
          </div>
        )
      }

030 create refs

class Demo extends React.Component{
    // 该容器只能存一个,专人专用
    myRef = React.createRef()
    myRef2 = React.createRef()
    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 = "渲染组件到页面"/>&nbsp;
          </div>
      )
    }
    showData = ()=>{
      console.log(this.myRef);
    }
    showData2 = ()=>{
      console.log(this.myRef2.current.value);
    }
  }

React.createRef()创建一个容器，这个容器只能容纳一个ref

031 总结 refs

尽量避免使用字符串形式的ref 有bug
回调形式的ref稍微麻烦点（开发常用）
createRef （最为推荐

posted on 2022-04-14 14:34 Nemo头发挺多阅读(26) 评论(0) 收藏举报