组件三大属性

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查看
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kB0ALnPU-1636382197892)(https://note.youdao.com/yws/api/personal/file/WEB6895a9922aa345451a7cbb11151053f7?method=download&shareKey=0883d12ba4cbd8763b8afa0c021679ee)]

//通过 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/>
    )
  }
}