2018-11-28react精华

问题一：当你调用setState时，发生了什么事？

当调用setState时，react做的第一件事就是将传递给setState 的对象合并到组件的当前状态，这将启动一个叫和解（reconciliation）的过程，和解的最终目的是以最有效的方式，根据这个新的状态来更新UI，为此react将构建一个新的react元素树（可以理解为UI的对象表示）

一旦有了这个树，为了弄清UI如何响应新的状态而改变，react会将这个新树与上一元素树对比（diff）；

问题二：在react中elelment和component有什么区别。

简单的说，一个react element描述了你想在屏幕上看到什么，换个说法，一个react element是一些UI的对象表示。

一个react component是一个函数或是一个类。它可以接受输入并返回一个react component（通常是通过jsx，被转化成一个create Element调用）。

问题三：什么时候在功能组件上使用类组件？

如果你的组件具有状态或生命周期方法，请使用类组件，否则请用功能组件。

问题四：什么是react的refs，为什么他们很重要？

refs就像是一个逃生舱口，允许你直接访问dom元素或组件实例。为了使用他们，您可以向组件添加一个refs属性，该属性的值是一个回调函数，它将接受底层的dom元素或组件的已挂载实例，作为其第一个参数：

class UnControlledForm extends Component{ handleSubmit = () => { console.log("Input Value: ",this.input.value) } render () {return( this.input = input} /> Submit ) }}

以上注意到我们的输入字段有一个ref属性，其值是一个函数，该函数接收我们放在实例上的实际的dom元素，以便在handleSubmit内部访问它。经常被误解的是：您需要使用类组件才能使用ref，但ref也可以通过利用javascript中的闭包与功能组件一起使用。

问题五：react中的keys是什么？为什么他们很重要？
keys是什么？帮助react跟踪那些项目已更改，添加或从列表中删除。
return(

      {this.state.todoItems.map(({task, uid}) => {

return

• {task}

      })}

  )

每个keys在兄弟元素之间独一无二的，我们已经谈过几次关于和解（reconciliation）的过程，而且这个和解过程中的一部分正在执行一个新的元素树与最前一个的差异，keys使处理列表时更加高效，因为react可以使用子元素上的keys快速知道元素是新的还是在比较树时才被移动。

而且keys不仅使这个过程更有效率，而且没有keys，react不知道那个本地状态对应于移动中的哪个项目。所以在map中的时候，不应忽略keys.

问题六：看下面的代码: 如果您在 下创建了一个 React 元素， 的组件定义将如何？

如果你不熟悉渲染回调模式，这将看起来有点奇怪，在这种模式下，一个组件接收一个函数作为它的child。注意上面包含在标签内的内容， Twitter 组件的 child 是一个函数，而不是你曾经习以为常的一个组件。 这意味着在实现 Twitter 组件时，我们需要将 props.children 作为一个函数来处理。

importReact, {Component,PropTypes} from'react'importfetchUser from'twitter'classTwitterextendsComponent{ state = { user:null, } static propTypes = { username:PropTypes.string.isRequired, } componentDidMount () { fetchUser(this.props.username) .then((user) =>this.setState({user})) } render () {returnthis.props.children(this.state.user) }}

值得注意的是：正如我上边提到的，我通过调用它并传递给user来把props.children处理为一个函数。