react|react 简要心得 react简要心得

1.JSX要加小括号() 如果存在子元素，则就像在HTML中那样直接包裹在父元素中即可（注意换行的JSX要加小括号()）.

const element = (

hello
world

)

2.原则注意我们将定时器存储在了组件实例上，而不是state中，请先记住一个原则：任何没有在组件的render()函数中使用的变量，都不应该存放在state中。
深度剖析：如何实现一个 Virtual DOM 算法
3.生命周期小结当把组件传递给ReactDOM.render()函数后，React会调用组件的构造函数constructor，进行一些初始化
然后React会去调用Clock组件的render()方法将组件渲染出来
当组件渲染完毕后，React会调用componentDidMount()生命周期钩子函数
当setState()函数被调用时，React会重新调用组件的render()方法进行重绘
当组件被从DOM中移除时，React会调用componentWillUnmount()生命周期钩子函数

4.表达式{}的写法
你可以传递一个字符串作为道具。这两个JSX表达式是等价的。
==
5.细节记录
（1）：以前一个组件是通过继承 Component 来构建，一个子类就是一个组件。而用函数式的组件编写方式是一个函数就是一个组件，你可以和以前一样通过使用该组件。不同的是，函数式组件只能接受 props 而无法像跟类组件一样可以在 constructor 里面初始化 state。你可以理解函数式组件就是一种只能接受 props和提供 render 方法的类组件。
（2）：state 是让组件控制自己的状态，props 是让外部对组件自己进行配置。
（3）：props 一旦传入，你就不可以在组件内部对它进行修改。但是你可以通过父组件主动重新渲染的方式来传入新的 props，从而达到更新的效果。
（4）：文件名的开头是大写字母。我们遵循一个原则：如果一个文件导出的是一个类，那么这个文件名就用大写开头。四个组件类文件导出都是类，所以都是大写字母开头。
（5）： PropTypes.object.isRequired。
PropTypes.array
PropTypes.bool
PropTypes.func
PropTypes.number
PropTypes.object
PropTypes.string
（6）：context 打破了组件和组件之间通过 props 传递数据的规范，极大地增强了组件之间的耦合性。而且，就如全局变量一样，context 里面的数据能被随意接触就能被随意修改，每个组件都能够改 context 里面的内容会导致程序的运行不可预料。
6.key的理解
c 和 b 的位置互换了。但其实 React.js 只需要交换一下 DOM 位置就行了，但是它并不知道其实我们只是改变了元素的位置，所以它会重新渲染后面两个元素（再执行 Virtual-DOM 策略），这样会大大增加 DOM 操作。但如果给每个元素加上唯一的标识，React.js 就可以知道这两个元素只是交换了位置。
对于用表达式套数组罗列到页面上的元素，都要为每个元素加上 key 属性，这个 key 必须是每个元素唯一的标识。一般来说，key 的值可以直接后台数据返回的 id，因为后台的 id 都是唯一的。
7.生命周期的理解
（1）：我们把 React.js 将组件渲染，并且构造 DOM 元素然后塞入页面的过程称为组件的挂载（这个定义请好好记住）。其实 React.js 内部对待每个组件都有这么一个过程，也就是初始化组件 -> 挂载到页面上的过程。所以你可以理解一个组件的方法调用是这么一个过程；
（2）
-> constructor()
-> componentWillMount()
-> render()
【react|react 简要心得】// 然后构造 DOM 元素插入页面
-> componentDidMount()
// ...
// 即将从页面中删除
-> componentWillUnmount()
// 从页面中删除
（3）总结：
我们一般会把组件的 state 的初始化工作放在 constructor 里面去做；在 componentWillMount 进行组件的启动工作，例如 Ajax 数据拉取、定时器的启动；组件从页面上销毁的时候，有时候需要一些数据的清理，例如定时器的清理，就会放在 componentWillUnmount 里面去做。
8.ref的使用

this.clock = clock} />
9.属性写法注意事项 class写成 className
style={{color:'red'}}