02组件三大属性

组件三大属性

state

理解

• state 是组件对象最重要的属性,值是一个对象(可以包含多组 key-value)
• 组件被称为"状态机",通过更新组件的 state 来更新对应的页面(重新渲染组件)

强烈注意

• 组件render()中的 this 是组件实例对象
• 组件中自定义方法中的this为 undefined,如何解决?
  • 强制绑定 this,通过函数对象的bind()
  • 箭头函数
• 状态数据不能直接修改,可通过setState()进行修改

// 错误
this.state.title = 'React';

// 正确
this.setState({title: 'React'});

state 的异步更新

调用 setState，组件的 state 并不会立即改变，setState 只是把要修改的状态放入一个队列中，React 会优化真正地执行时机，并且 React 会出于性能原因，可能会将多次 setState 的状态修改合并成一次状态修改。所以不要依赖当前的 State，计算下个 State。

props

react 中说的单向数据流值说的就是 props

理解

• 每个组件对象都有props(properties)属性
• 组件标签的所有属性都保存在props中

强烈注意

• 组件内部不要修改props

作用

• 通过标签外部向组件内部传递变化的数据
• 对 props 中的属性值进行类型限制和必要性限制

编码操作

class Person extends React.Component {
  // 类型检查与限制
  static propTypes = {
    name: propTypes.string.isRequired, //类型为字符串,必填
    age: propTypes.number, //类型为数值型
    sex: propTypes.string, //类型为字符串
    speak: propTypes.func, //类型为函数
  };

  //定义 props 的默认值
  static defaultProps = {
    age: 18, //默认18
    sex: "男", //默认为男
  };

  render() {
		//结构赋值,传入的参数都在 this.props 身上(是一个对象集合)
    const { name, age, sex } = this.props;
    return (
      <div>
        <ul>
          <li>{name}</li>
          <li>{age}</li>
          <li>{sex}</li>
        </ul>
      </div>
    );
  }
}

ReactDOM.render(
  <Person name="Tom" age={19} sex="男" speak={speak} />,
  document.getElementById("root")
);

//传入一个方法
function speak() {
  console.log("speak方法被调用了");
}

props 和 state 的区别

• props 中的数据都是外界传递过来的
• props 中的数据都是只读的，不能重新赋值
• state 中的数据都是组件私有的；（通过 Ajax 获取回来的数据，一般都是私有数据）
• state 中的数据，都是可读可写的
• 子组件只能通过 props 传递数据

ref

理解

• react 中的 ref 的作用就是用于获取 DOM 的，简单的说，你想获取一个 input 框的值，在 react 中怎么做呢？这时候 ref 就是你的首选。

回调函数法(推荐)

回调函数就是在 dom 节点或组件上挂载函数，函数的入参是 dom 节点或组件实例，达到的效果与字符串形式是一样的，都是获取其引用。

class Demo extends React.Component {
  showMsg1 = () => {
    //使用this.ipt1 获取当前节点
    const ipt1Value = this.ipt1.value
    console.log(ipt1Value);
  };
  showMsg2 = () => {
    //使用this.ipt2 获取当前节点
    const ipt2Value = this.ipt2.value;
    console.log(ipt2Value);
  }
  render() {
    return (
      <div>
        //node 是当前的DOM节点,将DOM节点赋值给 this.ipt1,后续可以直接以 this.ipt1 拿到当前节点
        <input ref={(node) => {this.ipt1 = node}} type="text" placeholder="点击时提示信息" />
        <button onClick={this.showMsg1}>点击提示左侧信息</button>
        //node 是当前的DOM节点,将DOM节点赋值给 this.ipt2,后续可以直接以 this.ipt2 拿到当前节点
        <input ref={(node) => {this.ipt2 = node}} onBlur={this.showMsg2} type="text" placeholder="失去焦点时提示信息" />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById("root"));

字符串法

通过 this.refs.ipt2 来引用真实 dom 的节点,这些被标记的标签都被存放在 refs 这个对象中，可通过this查看

//通过 ref 给当前DOM节点打标识为 ipt2,
<input ref="ipt2" onBlur={this.showMsg2} type="text" placeholder="失去焦点时提示信息" />

React.createRef()

class Demo extends React.Component{
  //通过 React.createRef() 将其赋值给一个变量，通过ref挂载在dom节点或组件上，该ref的 current 属性将能拿到dom节点或组件的实例
  myRef = React.createRef()
  //定义事件
  showMsg = () => {
    console.log(this.myRef.current.value)
  }
  render(){
    return (
      <div>
        <input ref={this.myRef} onBlur={this.showMsg} type="text">
      <div/>
    )
  }
}