0628

[LeungKaMing]

工作碰到的

在React中使用pre标签

class SomeComponent extends React.Component {
   render() {
        return (
          {/* 在反引号后面的字符串还是标点符号(包括空格)都会照旧在页面上展示出来 */}
          <pre>{`
            Hello   ,   
            World   .
          `}</pre>
        )
    }
}

ReactDOM.render(
  <SomeComponent />, 
  document.getElementById('content')
)

DOM上显示的效果是:

<pre>
            Hello   ,
            World   .
</pre>

---

话题

今天想花一点时间总结下自己学习React的过程中，结合资料悟到的一些道理：

• 组件化的粒度：大到一个页面，小到一个div，都可以被称为组件。但在设计前必须要把整个页面的布局做好组件的划分(个人习惯写在纸上)，好多次自己封装组件的时候都会把一些不是逻辑的元素集合 / 使用次数整个程序只出现一到两次的元素集合 也划分成组件，导致代码冗余并且显得没必要，尽量避免不必要的封装。
• 组件内部状态State：内部状态跟UI是挂钩的。一般组件内部都有自身的状态，除非是无状态组件 =>没有内部状态State，没有ref，没有生命周期函数，若不是需要控制生命周期函数的话建议多使用无状态组件，获得更好的性能。

const Stateless = (props) => (
  <div>{ this.props.text }</div>
)

<Stateless text="Hello World." />

• 外部属性Props：从外部传入来的参数，可以是组件 / 值 / 函数。组件可以根据传入的外部参数进行UI上的切换 => 既然外部参数可以传入==组件==，那就引入了组件嵌套的概念。
• 父子组件间的通信：在不使用Redux / Mobx的情况下，父子组件间通信过程：
• 1. 子组件使用父组件的状态：

graph LR
父组件State-->子组件Props

• 2. 子组件调用父组件的方法：

graph LR
父组件Methods-->子组件Props

• 3. 父组件使用子组件的方法 (无法做到，因为React是单向数据流，只能由父组件传给子组件)
  ：子组件Methods => 父组件
• 4. 父组件准备好子组件要用的状态从 props 传入，既然子组件的状态是由外部传入，换句话说，父组件的方法就能控制子组件的状态

class ParentComponent extends Component {
   constructor(props) {
      super(props);
      this.state = {
        open: false;
      }
   }

   toggleChildMenu() {
      this.setState({
        open: !this.state.open
      });
   }

   render() {
      return (
         <div>
           <button onClick={this.toggleChildMenu.bind(this)}>
              Toggle Menu from Parent
           </button>
           <ChildComponent open={this.state.open} />
         </div>
       );
    }
}

class ChildComponent extends Component {
    render() {
      return (
         <Drawer open={this.props.open}/>
      );
    }
}

• 虽然React是单向数据流，但是依旧可以通过绑定控制状态，从而影响状态：

// 伪代码
<div onClick={ this.changeState }>{ this.state.text }</div>

changeState () {
  this.setState({
    'text': 'Hello World.'
  })
}

• 生命周期：众多的生命周期来预测并控制整个组件的状态流向。【验证组件是否更新可以采用生命周期】
• React并不像Vue一样拥有双向数据绑定，但在不考虑性能基础上，也能做到类似 双向绑定的效果 => 就是上述提到的给元素绑定事件来修改状态。

概念

• VDOM(虚拟DOM)：顾名思义，不是真的2333，O。O。虚拟DOM相对于真实DOM，它是用户发起修改DOM操作时才存在的预处理阶段，只有满足一定条件下虚拟DOM才会渲染成真实DOM。考虑到其多了一步differ计算的过程，可能调用到内存，所以肯定会造成一定的性能损失，只是考虑到其带来的工程性的提升，这点性能损失不足为道。上述提及的differ计算只是VDOM的其中一点损耗性能缺点，如果任由用户不做限制的不停更新VDOM，这里面所引起的不适当重绘也会使性能显著下降，所以建议书写组件的时候不要忽略掉生命周期中的shouldComponentUpdate，这个方法的参数是nextProps和nextState，返回的是一个bool值，React会根据这个返回值来允许或阻止组件重绘。

shoudComponentUpdate(nextProps, nextState) {
  // 伪代码  
  return nextPropppps !== this.props;
}

通过设置类似上述合适条件，来防止绝大部分的无效重绘。

关于上面提及到的组件间状态传递，下一篇博文更新。

参考地址