差异

Question

需要了解ReactJs中这两个函数之间的区别。 ComponentWillMount（）{}与ComponentDidMount（）{}

Answer 1

componentWillMount（）在第一次渲染之前被调用，而componentDidMount（）在第一次渲染之后被调用。这两个组件仅被调用一次

请注意，最新的React版本v16中不推荐使用componentWillMount（）

Answer 2

讨论最多的话题仍在解释我的理解。 ComponentWillMount在呈现为名称建议之前执行 ComponentAfterMount会在渲染组件之前按照名称建议在屏幕上渲染之前执行。

在示例中查看控制台日志

class App extends React.Component {
  componentWillMount(){
     console.log("console loging before component will mount");
  }
  componentDidMount(){
     console.log("console loging after mounting component");
  }
  render(){
    console.log("rendering component")
    return(
     <div> component</div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='root' />

Answer 3

差异

componentDidMount（）

在安装组件后立即调用。
每次安装只调用一次，因此是进行网络请求和订阅的好地方。
请勿在此处分配状态或致电setState。

componentWillMount（）

在安装发生之前调用。
唯一在服务器渲染上调用的方法
应避免使用此方法（这是一种旧方法，将在即将发布的react版本中删除）。

您应避免使用 componentWillMount ，而应使用componentDidMount和构造函数请查看官方react docs以获取更多信息

React JS中的ComponentWillMount和ComponentDidMount有什么区别？

3 个答案:

差异