react 简要心得

1.JSX要加小括号()

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

const element = (

<div>

<span>hello</span>

<p>world</p>

</div>
)

---

2.原则

注意我们将定时器存储在了组件实例上，而不是state中，请先记住一个原则：任何没有在组件的render()函数中使用的变量，都不应该存放在state中。

深度剖析：如何实现一个 Virtual DOM 算法

---

3.生命周期小结

当把组件传递给ReactDOM.render()函数后，React会调用组件的构造函数constructor，进行一些初始化

然后React会去调用Clock组件的render()方法将组件渲染出来

当组件渲染完毕后，React会调用componentDidMount()生命周期钩子函数

当setState()函数被调用时，React会重新调用组件的render()方法进行重绘

当组件被从DOM中移除时，React会调用componentWillUnmount()生命周期钩子函数

---

4.表达式{}的写法

你可以传递一个字符串作为道具。这两个JSX表达式是等价的。

<Coustom message="aaa">  ==    <Coustom message={"aaa"}>

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()

// 然后构造 DOM 元素插入页面

-> componentDidMount()

// ...

// 即将从页面中删除

-> componentWillUnmount()

// 从页面中删除

（3）总结：

我们一般会把组件的 state 的初始化工作放在 constructor 里面去做；在 componentWillMount 进行组件的启动工作，例如 Ajax 数据拉取、定时器的启动；组件从页面上销毁的时候，有时候需要一些数据的清理，例如定时器的清理，就会放在 componentWillUnmount 里面去做。

8.ref的使用

<Clokc ref = {(clock)=>this.clock = clock} />

9.属性写法注意事项

class  写成 className

style={{color:'red'}}