React基本再回忆

2019年8月24日 193次阅读 来源: whhlu

从16年炎天初学React，到17年正式投入到工作中运用，直到现在V16.2发版，React发生了庞大的变化，近来在工作中运用时碰到很多基本不是异常清楚，借此再读
React官方文档
【中文】。

React中心的单向数据流、统统皆数据的state、不会转变的props，以及状况提拔等等常常运用便不多总结，须要的看官方文档。

JSX

JSX 实质只是为 React.createElement(component, props, …children)供应的语法糖！

  • 1.React DOM 在衬着之前都被转换成了字符串，它生成自带防备 XSS 进击的属性。
  • 2.Babel 转译器会把 JSX 转换成一个名为 React.createElement()的要领挪用。在线babel编译

以下两段代码等价（很多react的界面设计器经由过程这个道理，到达元数据转化React元素，完成界面化编程！）
嵌套就是多个create要领的嵌套。

function hello() {
  return <div className="red">Hello,<span>world!</span></div>;
}
"use strict";

function hello() {
  return React.createElement(
    "div",
    { className: "red" },
    "Hello,",
    React.createElement(
      "span",
      null,
      "world!"
    )
  );
}
  • 3.JSX中的属性是可以任何 {} 包裹的 JavaScript 表达式作为一个属性值，不能运用if和for。

须要轮回和前提衬着可以运用map、三目，或许运用if/for在jsx代码以外！

//毛病的！
class A extends React.Component {
  render() {
    return <div>{if(){}else{}}</div>;//本来还蒙蔽的不知道为何错了0.0
  }
}

React.Component （组件）

建立组件的四种体式格局：概况对照拜见或许react官网

  • React.Component 体式格局
class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
  • ES5
 var createReactClass = require('create-react-class');
var Greeting = createReactClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});
//或许运用react
var Greeting = React.create({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});
  • 函数式
const Button = ({
  day,
  increment
}) => {
  return (
    <div>
      <button onClick={increment}>Today is {day}</button>
    </div>
  )
}
  • PureComponet

大多数情况下， 我们运用PureComponent可以简化我们的代码，而且进步机能，然则PureComponent的自动为我们增加的shouldComponentUpate函数，只是对props和state举行浅比较(shadow comparison)，当props或许state自身是嵌套对象或数组等时，浅比较并不能获得预期的效果，这会致使现实的props和state发生了变化，但组件却没有更新的题目。固然照样有处置惩罚的要领的，所以发起照样罕用。

事宜处置惩罚

事宜绑定的四种要领：引荐运用第一第二种。

class Toggle extends React.Component {
  constructor(props) {
  {...}
  //要领一必需在这里绑定
    this.handleClick1 = this.handleClick.bind(this);
  }
  handleClick1() {
    this...
  }
  //要领二运用【属性初始化器语法】【须要开启babel stage-0以上】
  handleClick2=()=> {
    this...
  }
  render() {
    return (
    <div>
      <button onClick={this.handleClick1}></button>
      <button onClick={this.handleClick2}></button>
      //要领三在运用时绑定
      <button onClick={this.handleClick1.bind(this)}></button>
      //要领四在回调函数中运用 箭头函数
      /**
      衬着的时刻都邑建立一个差别的回调函数。在大多数情况下，这没有题目。但是假如这个回调函数作为一个属性值传入低阶组件，这些组件能够会举行分外的从新衬着。我们一般发起在组织函数中绑定或运用属性初始化器语法来防止这类机能题目。
      **/
      <button onClick={(e) => this.handleClick1(e)}></button>
      
    </div>
    );
  }
}

组合 vs 继续

在React中不引荐运用继续,不引荐继续自定义Component。

//不引荐运用
class Parent extends React.Component {
  render() {
    return <div>...</div>;
  }
}
class A extends Parent {
  render() {
    return <div>...</div>;
  }
}
//引荐运用
class A extends React.Component {
  render() {
    return <Parent>...</Parent>;
  }
}

不运用 ES6

  • Component || create
  • defaultProps || getDefaultProps
  • constructor state || getInitialState
  • this bind || 不须要
class Greeting extends React.Component {
constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
    this.handleClick = this.handleClick.bind(this);
  }
   handleClick() {
    alert(this.state.message);
  }
  render() {
    return <h1 onClick={this.handleClick}>Hello, {this.props.name}</h1>;
  }
}
Greeting.defaultProps = {
  name: 'Mary'
};
var createReactClass = require('create-react-class');
var Greeting = createReactClass({
 getInitialState: function() {
    return {count: this.props.initialCount};
  },
getDefaultProps: function() {
    return {
      name: 'Mary'
    };
  },
   handleClick: function() {
    alert(this.state.message);
  },
  render: function() {
  //组件中的要领会自动绑定至实例，不须要像上面那样加 .bind(this)
    return <h1 onClick={this.handleClick}>Hello, {this.props.name}</h1>;
  }
});

Refs

  1. 假如可以经由过程声明式完成，则只管防止运用 refs。
  2. 不能在函数式组件上运用 ref 属性，由于它们没有实例
  3. 旧版 API：String 范例的 Refs，存在题目，能够会在将来移除，不引荐运用。
  4. 对父组件暴露refs，在父元素拿子元素
function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} />
    </div>
  );
}

class Parent extends React.Component {
//this.inputElement 就是CustomTextInput中的input
  render() {
    return (
      <CustomTextInput
        inputRef={el => this.inputElement = el}
      />
    );
  }
}

ReactDOM

猎取一个DOM除了refs另有越发简朴粗犷的要领findDOMNode。
findDOMNode 是用于操纵底层DOM节点的备用计划。运用它的优先级比refs更低！！
findDOMNode 只对挂载过的组件有用。
findDOMNode 不能用于函数式的组件中。

import ReactDOM from 'react-dom';
ReactDOM.render(
  element,
  container,
  [callback]//不为人知的第三个参数！！
)
ReactDOM.unmountComponentAtNode(container)
ReactDOM.findDOMNode(component)

不经常使用的新发现

  • 空的 JSX 标签Fragments <></>或许<React.Fragment></React.Fragment>
  • 与运算符 && true && expression 老是返回 expression，而 false && expression 老是返回 false。
  • 阻挠组件衬着经常使用null组件的 render 要领返回 null 并不会影响该组件生命周期要领的回调。比方，componentWillUpdate 和 componentDidUpdate 依旧可以被挪用。

### 高阶组件HOC 运用高阶组件（HOC）处置惩罚交织题目

    原文作者：whhlu
    原文地址: https://segmentfault.com/a/1190000013648359
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞