摘要：如果需要交互，应该在生命周期中进行交互。生命周期过程中涉及三个主要的动作术语表示正在挂接虚拟到真实。每当组件第一次加载到中的时候，我们都想生成定时器，表示正在被重新渲染。组件是真正隔离的每一个都会建立自己的定时器，并独立的更新。
state & 生命周期 state
我们之前实现的时钟，实现方式是每个一秒进行一次渲染dom，但是这种方法并不合理。我们想要通过一种状态来控制组件，实现更优的渲染。
state
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
原生方法
Document
类
Document
props与state的区别
props不能被其所在的组件修改，从父组件传递进来的属性不会在组件内部更改； state只能在所在组件内部更改，或在外部调用setState函数对状态进行间接修改。
render成员函数
首先说render是一个函数，它对于组件来说，render成员函数是必需的。render函数的主要流程是检测this.props和this.state,再返回一个单一组件实例。 render函数应该是纯粹的，也就是说，在render函数内不应该修改组件state，不读写DOM信息，也不与浏览器交互。如果需要交互，应该在生命周期中进行交互。生命周期
过程中涉及三个主要的动作术语：
mounting:表示正在挂接虚拟DOM到真实DOM。每当Clock组件第一次加载到DOM中的时候，我们都想生成定时器，
updating:表示正在被重新渲染。
unmounting:表示正在将虚拟DOM移除真实DOM。每当Clock生成的这个DOM被移除的时候，我们也会想要清除定时器，
Document
再来一个例子
Document
1. 当正确使用状态State被传入 ReactDOM.render() 时, React 会调用 Clock组件的构造函数。 因为 Clock 要显示的是当前时间，所以它将使用包含当前时间的对象来初始化 this.state 。我们稍后会更新此状态。 2. 然后 React 调用了 Clock 组件的 render() 方法。 React 从该方法返回内容中得到要显示在屏幕上的内容。然后，React 然后更新 DOM 以匹配 Clock 的渲染输出。 3. 当 Clock 输出被插入到 DOM 中时，React 调用 componentDidMount() 生命周期钩子。在该方法中，Clock 组件请求浏览器设置一个定时器来一次调用 tick()。 4. 浏览器会每隔一秒调用一次 tick()方法。在该方法中， Clock 组件通过 setState() 方法并传递一个包含当前时间的对象来安排一个 UI 的更新。通过 setState(), React 得知了组件 state(状态)的变化, 随即再次调用 render() 方法，获取了当前应该显示的内容。 这次，render() 方法中的 this.state.date 的值已经发生了改变， 从而，其输出的内容也随之改变。React 于是据此对 DOM 进行更新。 5. 如果通过其他操作将 Clock 组件从 DOM 中移除了, React 会调用 componentWillUnmount() 生命周期钩子, 所以计时器也会被停止。
1.不要直接更新状态
this.state.comment = "hello";
应当使用setState()
this.setState({
comment: "hello
})
构造函数是唯一初始化this.state的地方
2.状态可能是异步的
this.state this.props可能是异步的，我们不能依靠她们的值来计算下一个状态。
// 例如： 此代码可能无法计算新的值
this.setState({
counter: this.state.count + this.props.increament
})
为了解决这个问题，我们应该使用setState的第二种形式来处理。
this.setState(function(prevState, props) {
return {
counter: prevState.counter + props.insertment
}
})
// 使用箭头函数
this.setState((prevState, props) => ({
counter: prevState.counter + props.insertment
}))
3.状态更新合并
// 例如： 你的状态可能包含一些独立的变量
constructor(props) {
super(props);
this.state = {
posts: [],
comments: []
};
}
// 我们可以独立的更新
componentDidMount() {
fetchPosts().then(response => {
this.setState({
posts: response.posts
});
});
fetchComments().then(response => {
this.setState({
comments: response.comments
});
});
}
这里的合并是浅合并，也就是说this.setState({comments})完整保留了this.state.posts，但完全替换了this.state.comments。
3.数据自顶向下流动
父子组件都不知道某一个组件是否有状态，并且它们不应该关心某一个组件的状态，因为每一个状态除了拥有它并且设置它的组件之外，其他的组件是无法访问到的。
组件可以选择将其状态作为属性传递给其子组件：
这通常被称为是自顶向下或者是单项数据流.任何状态始终由某一个特定的组件所拥有，并且改状态导出的任何数据只能影响树中下方的组件
如果你想象一个组件树作为属性的瀑布，每个组件的状态就像一个额外的水源，它连接在一个任意点，但也流下来。
4.组件是真正隔离的
function App() {
return (
每一个clock都会建立自己的定时器，并独立的更新。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/108356.html
摘要：在构造函数里面初始化的数据，把数据放在页面上，点击时候调用方法改变中的数据。是中父组件向子组件通信的方式，下面是一个简单的例子使用组件我是显示的数据我们定义组件时候在构造函数中可以接收到参数，并且要使用传到的构造方法中。 React的学习之路还要继续走下去，最近一边在做未完成的项目一边学习React，项目是vue写的，后面还需要有一个后台管理系统计划使用react完成，寒假说长也不长，...
摘要：毫无疑问的是算法的复杂度与效率是决定能够带来性能提升效果的关键因素。速度略有损失，但可读性大大提高。因此目前的主流算法趋向一致，在主要思路上，与的方式基本相同。在里面实现了的算法与支持。是唯一添加的方法所以只发生在中。 VirtualDOM是react在组件化开发场景下，针对DOM重排重绘性能瓶颈作出的重要优化方案，而他最具价值的核心功能是如何识别并保存新旧节点数据结构之间差异的方法，...
react组件 参考：https://facebook.github.io/re... react的组件是其核心思想部分，react允许将整个ui设计分割称为独立的、可复用的隔离模块，react的组件是一个抽象的类，直接使用reacy.component是没有很大意义的，所以一般使用的方法就是定义一个 class 来继承这个component，并且需要实现方法 render（）；就像下面一样： ...
react组件 参考：https://facebook.github.io/re... react的组件是其核心思想部分，react允许将整个ui设计分割称为独立的、可复用的隔离模块，react的组件是一个抽象的类，直接使用reacy.component是没有很大意义的，所以一般使用的方法就是定义一个 class 来继承这个component，并且需要实现方法 render（）；就像下面一样： ...
本篇主要和大家沟通关于ahooks ，我们可以理解为加深对 React hooks 的了解。 我们先说下关于抽象自定义 hooks。构建属于自己的 React hooks 工具库。 其实我们应该培养阅读学习源码的习惯，工具库是一个对源码阅读不错的选择。 注：本系列对 ahooks 的源码解析是基于v3.3.13。 现在就进入主题用ahooks 来封装 React要注意的时机？ Fun...
阅读 1986·2021-09-22 15:25
阅读 3451·2019-08-30 12:48
阅读 1956·2019-08-30 11:25
阅读 2221·2019-08-30 11:05
阅读 591·2019-08-29 17:28
阅读 3148·2019-08-26 12:16
阅读 2474·2019-08-26 11:31
阅读 1481·2019-08-23 17:08
