React基础再回顾-白红宇

React基础再回顾

阅读量：6867 次

发布时间：2019-06-26

本文共 4247 字，大约阅读时间需要 14 分钟。

从16年夏天初学React，到17年正式投入到工作中使用，直到现在V16.2发版，React发生了巨大的变化，最近在工作中使用时遇到很多基础不是非常清晰，借此再读文档。

React核心的单向数据流、一切皆数据的state、不会改变的props，以及状态提升等等经常使用便不多总结，需要的看官方文档。

JSX

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

1.React DOM 在渲染之前都被转换成了字符串，它天生自带防止 XSS 攻击的属性。

2.Babel 转译器会把 JSX 转换成一个名为 React.createElement()的方法调用。

以下两段代码等价（许多react的界面设计器通过这个原理，达到元数据转化React元素，实现界面化编程！）

嵌套就是多个create方法的嵌套。

function hello() {  return 
    
     Hello,
     world!
    
;}

"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 
    
     {if(){}else{}}
    
;//原来还蒙蔽的不知道为什么错了0.0  }}

React.Component （组件）

创建组件的四种方式：

React.Component 方式

class Greeting extends React.Component {  render() {    return Hello, {this.props.name}
;  }}

var createReactClass = require('create-react-class');var Greeting = createReactClass({  render: function() {    return Hello, {this.props.name}
;  }});//或者使用reactvar Greeting = React.create({  render: function() {    return Hello, {this.props.name}
;  }});

函数式

const Button = ({  day,  increment}) => {  return (    
          
         
    
  )}

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 (    
          
           
           //方法三在使用时绑定      
           //方法四在回调函数中使用 箭头函数      /**      渲染的时候都会创建一个不同的回调函数。在大多数情况下，这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。      **/      
               
    
    );  }}

组合 vs 继承

在React中不推荐使用继承,不推荐继承自定义Component。

//不推荐使用class Parent extends React.Component {  render() {    return 
    
     ...
    
;  }}class A extends Parent {  render() {    return 
    
     ...
    
;  }}

//推荐使用class A extends React.Component {  render() {    return 
    
     ...
    ;  }}

不使用 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 Hello, {this.props.name}
;  }}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 Hello, {this.props.name}
;  }});

Refs

如果可以通过声明式实现，则尽量避免使用 refs。

不能在函数式组件上使用 ref 属性，因为它们没有实例

旧版 API：String 类型的 Refs，存在问题，可能会在未来移除，不推荐使用。

对父组件暴露refs，在父元素拿子元素

function CustomTextInput(props) {  return (    
          
         
    
  );}class Parent extends React.Component {//this.inputElement 就是CustomTextInput中的input  render() {    return (      
    
      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)