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

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

-> componentDidMount()

// ...

// 即将从页面中删除

-> componentWillUnmount()

// 从页面中删除

(3)总结:

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

8.ref的使用


this.clock = clock} />

9.属性写法注意事项

class  写成 className

style={{color:'red'}}

你可能感兴趣的