React学习2-使用组件构建应用程序

一、propsTypes:propTypes可以显示的在你的组件中声明可以使用哪些属性、哪些属性是必须的、属性可以接受的数据类型等。使用propsTypes可以获得两个好处:(1)可以很容易的打开一个组件的代码,查看哪些属性是必须的,他们的数据类型是什么。(2)当误用了组件的时候,React会在控制台中显示一个错误信息,告诉你哪个属性有问题或者被误用了,以及是哪个render方法导致了问题


在上面的代码中fileName被定为需要一个字符串类型的数据,如果传输的数据类型不是字符串类型的,责会在console中提示错误信息。对于可选的属性,只要不设置.isRequired,React就只有在这个属性被赋值的情况下才会检查他的数据类型。

二、可以为组件提供一个默认值,这样当属性未被显示赋值的时候,将会使用这个默认值。定义一个defaultProps对象作为一个构造函数属性。

如果没有为组件传值,那么该组件就会使用默认值,如果传值,就是显示你提供的值,当然这个值必须是字符串类型。

三、propsTypes校验器: React的PropsTypes包含有一组检验期,可用来确保组件接受到的数据是有效的

React.createClass({
  propTypes: { // 默认情况下,这些 prop 都是可传可不传的。 React.PropTypes.array, 属性必须是一个数组 React.PropTypes.bool, 属性必须一个布尔值 React.PropTypes.func, 属性必须是一个函数 React.PropTypes.number, 属性必须是一个数字 React.PropTypes.object, 属性必须是一个对象 React.PropTypes.string, 属性必须是一个字符串  // 所有可以被渲染的对象:数字,字符串,DOM 元素或包含这些类型的数组。 React.PropTypes.node, // React 元素 React.PropTypes.element, //属性必须是指定类的实例 React.PropTypes.instanceOf(Message), // 确保属性被限制为一组枚举值中的一项 React.PropTypes.oneOf(['News', 'Photos']), // 属性必须是属于指定的一组数据类型中的一种 React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.number, React.PropTypes.instanceOf(Message) ]), // 指定类型组成的数组 React.PropTypes.arrayOf(React.PropTypes.number), // 指定类型的属性构成的对象 React.PropTypes.objectOf(React.PropTypes.number), // 属性必须是一个符合特定格式的对象,他需要拥有同一组属性 optionalObjectWithShape: React.PropTypes.shape({ color: React.PropTypes.string, fontSize: React.PropTypes.number }), // 以后任意类型加上 `isRequired` 来使 prop 不可空。 React.PropTypes.func.isRequired, // 不可空的任意类型 React.PropTypes.any.isRequired, 四、自定义propTypes:校验器在本质上就是一个函数。他接受的参数是一组属性,要检查属性的名称、组件的名称。函数在校验的属性值是有效的时候什么都不返回,要么返回一个说明了无效的属性值Error对象。五、1.props是一个组件的配置信息,他们是从组件的上层传递而来,在组件接受熬之后就保持不变。 2.state一开始在组件的构造函数中被设置为一个默认值,然后随着组件的执行而不断地变化(通常是由于用户的操作而变化)。一个组件 在内部管理他自己的state,每当state变化的时候,组件就会自动的渲染。六、React组件分为两种,一类组件内部有state,称为有状态组件,另一种是内部没有state,只是负责显示数据称为单纯组件七、让一个应用程序的大部分组件都是无状态的单纯组件是一个最佳实践。如果应用程序的state在多个组件之间传播,会导致他难以跟踪,犹豫应用程序的工作方式变得更不清晰,也降低了程序代码的可预测性。这会在你的代码中潜在的引入一些难以理清和解决的情况。八、那些组件应当是有状态的组件:1.标识出基于那个state来进行渲染的每一个组件。2.找到一个通用的owner阿健(在组件的层级中,位于所有需要那个state的组件之上的单个组件)。3.通用的owner组件或者更好层级的另一个组件应当拥有那个state。4.如果你无法找到一个合理的拥有state的组件,创建一个新的组件来拥有state,然后在所有的组件层级中,将他添加到所有需要那个state的组件上的某个位置。九、组件通信:在React中,数据沿着组件的层级,从上层传递到下层。在一个有意义的应用程序中,嵌套的子组件需要能与父组件进行通信,实现这种通信的一个方法,就是通过父组件作为props传递而来的回调进行。十、组件的声明周期:   1.加载(Mounting):constructor》 componentWillMount(被调用一次,在初始渲染之前立即被调用。在这个阶段设置state不会触发重新渲染) 》 render 》 componentDidMount(被调用一次,在初始渲染之后被立即调用,在生命周期这个时间点,组件有了一个可被访问的DOM内容,这样对于数据获取操作而言是很有用的。)   2.卸载(Unmounting):componentWillUnmount(在一个组件被从COM中卸载时被立即调用,当你需要进行一些清理操作,例如移除在加载阶段定义的事件侦听计时器,就可以利用此函数)   3.props更改:componentWillReceiveProps(当一个组件接受到新的props时被调用。在这个函数中调用this.setState()不会触发一次新的渲染 》 shouldComponentUpdate(shouldComponentUpData是一个特别的函数他会在render函数之前被调用,在这个函数里面可以定义是否需要进行一次渲染,或者还是说这次渲染可以被跳过。这个函数对于性能优化而言很有用) 》 componentWillUpdate(当接受到新的props或者state而进行渲染之前,此函数被立即调用。在这个函数中不允许通过this.setState()对state进行任何更改,他只能严格的用于准备即将开始的渲染,而不能自己再去触发一次渲染) 》render 》 componentDidUpdate(在组件的更新被刷新到DOM之后,就立即被调用)    4.state更改:shouldComponentUpdate 》 componentWillUpdate 》 render 》 componentDidUpdate(state更改基本上会触发和props更改相同的那些生命周期函数,只有一个类外,没有对应于componentWillRecriveProps的函数。一个传入props的转换操作可能会导致state的更改,但是反之则不然。如果你需要在state更改时进行操作,使用componentWilUpdate函数)    5.获取数据:当应用程序需要从远端获取数据的时候,应该在一个特定的组件生命周期中获取数据:componentDidMount生命周期函数    6.容器组件:一个新的有状态的组件,来专门负责和远端API通信,并将数据和回调以props的方式传递给下层的组件,这样的组件叫做容器组件十一、在js中,对象和数组都是通过引用的方式进行传递的并且数组的非侵入式方法和Object.assign都不会做深度的复制。这就意味着在你通过非侵入式方法和Object.assign所创建的对象中所包含的嵌套对象和数组,仍然指向的事原对象中的嵌套对象和数组。十二、update:这个update函数应用到普通的js对象和数组之上,帮助你将他们包装成不可变的对象:函数不会真正修改这些对象,而总是返回一个新的可变的对象。update函数接受两个参数:第一个参数是你想要更新的对象或者数组。第二给参数是一个对象,他描述了你想要在何处进行何种修改

猜你喜欢

转载自blog.csdn.net/u013121755/article/details/80852643