相关疑难解决方法(0)

我正在使用JSLint来完成JavaScript,并且在执行诸如比较语句内部之类的事情时,它会返回许多建议来替换==(两个等号)===(三个等号).idSele_UNVEHtype.value.length == 0if

有没有性能优势,以代替==用===？

任何性能改进都会受到欢迎,因为存在许多比较运算符

如果没有进行类型转换,是否会有性能提升==？

才知道,从阵营v15.3.0,我们有一个新的名为基类PureComponent与扩展PureRenderMixin内置.我所理解的是,在引擎盖下,它采用了内部道具的浅层比较shouldComponentUpdate.

现在我们有3种方法来定义React组件:

1. 功能无状态组件,不扩展任何类
2. 扩展PureComponent类的组件
3. 扩展Component类的普通组件

一段时间后,我们习惯将无状态组件称为纯组件,甚至是哑组件.似乎"纯"这个词的整个定义现在在React中已经改变了.

虽然我理解这三者之间的基本差异,但我仍然不确定何时选择什么.还有什么是性能影响和权衡取舍？

更新:

这些是我希望澄清的问题:

• 我应该选择将我的简单组件定义为功能(为简单起见)还是扩展PureComponent类(为了性能)？
• 性能提升是否因为我丢失的简单性而得到了真正的平衡？
• Component当我总能使用PureComponent以获得更好的性能时,我是否需要扩展普通类？

有人请用一个简单的例子向我解释 React 文档的最后一段，它是关于 React.PureComponent 的，我见过的所有示例都是高级的，我刚刚开始了解这个概念，但我无法确切地看到它是什么指。正是这一点，孩子也应该“纯洁”。据我所知，我认为这种说法有些言过其实，因为如果父亲不重新呈现自己，那么孩子们也不会重新呈现自己。，或者，是否有什么东西我无法逃脱而我无法想象？这就是为什么我需要一个简单的例子，我已经在这里查看了所有类似的问题，但它们是高级示例，并不涵盖我正在寻找的内容。

“此外，React.PureComponent 的 shouldComponentUpdate() 会跳过整个组件子树的 prop 更新。确保所有子组件也是“纯”的”

我是新来的反应。当我的状态发生变化时，为什么我的页面在鼠标悬停和鼠标移出时不会重新呈现？如果我查看console.log，我可以看到状态变化。但我无法让它发挥作用。这是我的代码：

export default class Nav extends React.PureComponent {

  constructor(props) {
    super(props);
    this.navLevelOneId = '';

    this.state = {
      showSubMenu: []
    };
  }

  // Mouse over function
  handleHover = (id,event) => {
    let showSubMenu=this.state.showSubMenu;
    showSubMenu[id]=!showSubMenu[id]
    this.setState({showSubMenu: showSubMenu}, () => {
      console.log(this.state.showSubMenu);  
    });
  }

  render() {

    return (

          <div ref="megaMenu" className="navbar navbar-default navbar-static-top">
            <div className="container">
              <div className="navbar-header">
                <button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                  <span className="icon-bar"></span>
                  <span className="icon-bar"></span>
                  <span className="icon-bar"></span>
                </button>
              </div>
              <div className="navbar-collapse collapse">
                      <ul className="nav navbar-nav">
                        <li onMouseOver={this.handleHover.bind(this,0)} onMouseOut={this.handleHover.bind(this,0)}>
                                  <a>Home</a>
                                </li> …