[JavaScript知识库]react ref和组件API

介绍:

昨天学习到了生命周期,今天我们接着昨天的知识点继续学习,今天学习一下state ,setState以及ref和组件API,大家感兴趣的话可以跟随文章进行学习呦

state和setState

state 组件自身状态

setState(updater[,callback])

第一个参数:updater 更新数据的方法/对象

第二个参数:callback 更新成功后的回调函数

异步: react通常会集齐一批需要更新的组件,然后一次性更新来保证渲染的性能
浅合并: Object.assign()
React 在调用 setstate 后，react 会将传入的参数对象和组件当前的状态 合并，触发调和过程， 在调和过程中，react 会根据新的状态构建 react 元素树重新渲染整个 UI 界面，在得到元素树之后，react 会自动计算新老节点的差异，根据差异对界面进行最小化重新渲染

ref是什么

ref是React提供的用来操纵React组件实例或者DOM元素的接口。

ref分为三种定义方式

1.字符串形式的ref

2.回调形式的ref

3.createRef创建ref容器·

代码效果图:

class MyComponent extends React.Component {
  handleClick() {
    // 使用原生的 DOM API 获取焦点
    this.refs.myInput.focus();
  }
  render() {
    //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
    return (
      <div>
        <input type="text" ref="myInput" />
        <input
          type="button"
          value="点我输入框获取焦点"
          onClick={this.handleClick.bind(this)}
        />
      </div>
    );
  }
}
 
ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

Keys

介绍

Keys 可以在 DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串。通常，我们使用来自数据的 id 作为元素的 key:

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

当元素没有确定的 id 时，你可以使用他的序列号索引 index 作为 key：

const todoItems = todos.map((todo, index) =>
  // 只有在没有确定的 id 时使用
  <li key={index}>
    {todo.text}
  </li>
);

注意

如果列表可以重新排序，我们不建议使用索引来进行排序，使用索引的话每修改一次属性,所有属性都会重新渲染一遍,非常浪费性能,所有不建议使用索引

用keys提取组件

元素的 key 只有在它和它的兄弟节点对比时才有意义。

比方说，如果你提取出一个 ListItem 组件，你应该把 key 保存在数组中的这个 元素上，而不是放在 ListItem 组件中的

• 元素上。

• 错误的示范

  function ListItem(props) {
    const value = props.value;
    return (
      // 错啦！你不需要在这里指定key:
      <li key={value.toString()}>
        {value}
      </li>
    );
  }
  
  function NumberList(props) {
    const numbers = props.numbers;
    const listItems = numbers.map((number) =>
      //错啦！元素的key应该在这里指定：
      <ListItem value={number} />
    );
    return (
      <ul>
        {listItems}
      </ul>
    );
  }
  
  
  const numbers = [1, 2, 3, 4, 5];
  ReactDOM.render(
    <NumberList numbers={numbers} />,
    document.getElementById('example')
  );
  

  key的正确使用方式

  React 实例
  function ListItem(props) {
    // 对啦！这里不需要指定key:
    return <li>{props.value}</li>;
  }
   
  function NumberList(props) {
    const numbers = props.numbers;
    const listItems = numbers.map((number) =>
      // 又对啦！key应该在数组的上下文中被指定
      <ListItem key={number.toString()}
                value={number} />
   
    );
    return (
      <ul>
        {listItems}
      </ul>
    );
  }
   
  const numbers = [1, 2, 3, 4, 5];
  ReactDOM.render(
    <NumberList numbers={numbers} />,
    document.getElementById('example')
  );
  

  组件API

  1. 替换状态：replaceState

  基本表达式: replaceState(object nextState[, function callback])

  参数一:nextState，将要设置的新状态，该状态会替换当前的state。

  参数二:callback，可选参数，回调函数。该函数会在replaceState设置成功，且组件重新渲染后调用。
  参数三:replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。

  2. 设置属性：setProps

  表达式:setProps(object nextProps[, function callback])

  参数一:nextProps，将要设置的新属性，该状态会和当前的props合并

  参数二:callback，可选参数，回调函数。该函数会在setProps设置成功，且组件重新渲染后调用。

  设置组件属性，并重新渲染组件。

  props相当于组件的数据流，它总是会从父组件向下传递至所有的子组件中。当和一个外部的JavaScript应用集成时，我们可能会需要向组件传递数据或通知React.render()组件需要重新渲染，可以使用setProps()。

  更新组件，我可以在节点上再次调用React.render()，也可以通过setProps()方法改变组件属性，触发组件重新渲染。

  3. 替换属性：replaceProps

  表达式:replaceProps(object nextProps[, function callback])

  参数一: nextProps，将要设置的新属性，该属性会替换当前的props。

  参数二: callback，可选参数，回调函数。该函数会在replaceProps设置成功，且组件重新渲染后调用。
  replaceProps()方法与setProps类似，但它会删除原有 props。

  。

  4. 强制更新：forceUpdate

  表达式: forceUpdate([function callback])

  参数说明
  callback，可选参数，回调函数。该函数会在组件render()方法调用后调用。

  forceUpdate()方法会使组件调用自身的render()方法重新渲染组件，组件的子组件也会调用自己的render()。但是，组件重新渲染时，依然会读取this.props和this.state，如果状态没有改变，那么React只会更新DOM。

  forceUpdate()方法适用于this.props和this.state之外的组件重绘（如：修改了this.state后），通过该方法通知React需要调用render()

  一般来说，应该尽量避免使用forceUpdate()，而仅从this.props和this.state中读取状态并由React触发render()调用。

  5. 获取DOM节点：findDOMNode

  表达式: DOMElement findDOMNode()

  返回值: DOM元素DOMElement

  如果组件已经挂载到DOM中，该方法返回对应的本地浏览器 DOM 元素。当render返回null 或 false时，this.findDOMNode()也会返回null。从DOM 中读取值的时候，该方法很有用，如：获取表单字段的值和做一些 DOM 操作。

  6. 判断组件挂载状态：isMounted

  表达式: bool isMounted()

  返回值：true或false，表示组件是否已挂载到DOM中

  isMounted()方法用于判断组件是否已挂载到DOM中。可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错。

  总结

  今天主要学习了组件通信(ref)以及组件API,今天的知识也是react偏复杂一点的,大家可以在看知识点的同时,多练习一下,边敲代码边学习,这样的话,记忆的也更加深刻.

  最后作者创作不易,如果文章对你有帮助的话,记得留下你的点赞和关注呦.