小编Gui*_*chi的帖子

反应文件指出render函数应该是纯这意味着它不应该使用this.setState它.但是,我相信,当状态依赖于"远程",即从阿贾克斯call.The唯一的解决办法的结果是setState()一个内部render功能

在我的情况下.我们的用户可以登录.登录后,我们还需要检查用户的访问权限(ajax调用)来决定如何显示页面.代码是这样的

React.createClass({
     render:function(){
          if(this.state.user.login)
          {
              //do not call it twice
              if(this.state.callAjax)
              {
              var self=this
              $.ajax{
                  success:function(result)
                  {
                      if(result==a) 
                      {self.setState({callAjax:false,hasAccess:a})}
                      if(result==b) 
                      {self.setState({callAjax:false,hasAccess:b})}

                  }
              }
              }
              if(this.state.hasAccess==a) return <Page />
              else if(this.state.hasAccess==a) return <AnotherPage />
              else return <LoadingPage />
          }
          else
          {
            return <div>
                   <button onClick:{
                   function(){this.setState({user.login:true})}
                   }> 
                   LOGIN
                   </button>
                   </div>
          }
     }
})

ajax调用不能出现,componentDidMount因为当用户单击LOGIN按钮时,页面被重新呈现并且还需要ajax调用.所以我认为唯一的地方setState是在render函数内部违反了React原则

更好的解决方案？提前致谢

当我读取socket.io 客户端API时,请注意api公开Manger和Socket接口,它在事件和方法方面看起来非常相似

另外,我可以从文档中得出结论,我们可以从套接字实例获取管理器实例,socket.io并且管理器实例包含和套接字实例manager.engine.这就是我所知道的

鉴于他们的API几乎相同,例如,我不能说manager.disconnet()和之间有任何区别socket.disconnect().我认为根本原因是我无法获得当时的关系

用于创建 React 组件的 es6 语法是 。export default class ExampleComponent extends React.Component但是它仍然可以在export default class ExampleComponent没有extends React.Component条件的情况下工作import React from 'react'；为什么会这样

我以为在componentWillUpdate被召唤时,我可以阅读最新的状态,即状态this.state.但是,在我仔细检查文件后,我意识到自己错了.事实是,即使在之后componentWillUpdate被调用this.state,它仍然会读取"旧"状态.这个设计有什么意义？怎么componentWillUpdate有用？

最近，我们想在React中实现一些动画，这就是我们想要的：当发生某件事（从webSocket接收消息）时，重新排列React组件的列表。在我的情况下，列表中该项目只有一个位置将被更改。因此，首先从原始位置淡出该项目，然后将其淡入正确的位置。我的解决方案是使用JQuery删除并添加相应的项目DOM，因为它易于实现动画（淡入和淡出），同时我还正确地更新了底层数据结构（React依赖于此渲染）以期望使React下次再次基于emitChange时的状态正确渲染DOM。但是，即使基础数据结构正确，React仍无法按预期工作，顺序仍然混乱。有趣的是，当我在Chrome中检查了react插件时，正确，但是，当我检查真实的DOM时，顺序是不正确的。显然，两个DOM 不同步

有办法解决吗？

另外，我阅读了React加载项的动画部分，但是，我认为它是有限的，当我重新排序列表时，动画不适用。如果有实现此目标的反应方法，我将不胜感激

我在React玩了几年，在某些情况下仍然对mount / unmount机制感到困惑。

由于安装/卸载是执行副作用的地方，因此我不希望它们被随机调用。所以我需要弄清楚它们是如何工作的。据我目前所了解，当虚拟dom不存在于实际dom中时，往往会被卸载。但是，这似乎不是全部，我无法对此进行推理

function TestMount(props) {
  useEffect(() => {
    console.log("componentDidMount", props.name);
    return () => {
      console.log("componentWillUnount", props.name);
    };
  }, []);
  return <h1>Test content {" " + JSON.stringify(props.name)}</h1>;
}

function Update({ click }) {
  return <button onClick={click}>Update</button>;
}

function App() {
  const [count, setCount] = useState(0);
  const Component = name => <TestMount name={name} />;
  return (
    <div className="App">
      <h1>{count}</h1>
      <Component name="one" />
      {Component("two")}
      <Update click={() => setCount(x => x + 1)} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App …