react学习笔记

props

• let HelloBox=React.createClass({
• render:function(){
• return <div>{'Hello '+this.props.myattr}</div>;
• }
• })
• ReactDOM.render(<HelloBox myattr="world"/>,document.getElementById("demo"));

通常固定的组件内只读的、应由父组件传递进来的属性适合放在props集合中，如组件的类名、颜色、字体、事件响应回调函数等。

 

props与state的区别

props不能被其所在的组件修改，从父组件传递进来的属性不会在组件内部更改；

state只能在所在组件内部更改，或在外部调用setState函数对状态进行间接修改。

 

 

render成员函数 首先说render是一个函数，它对于组件来说，render成员函数是必需的。render函数的主要流程是检测this.props和this.state,再返回一个单一组件实例。

render函数应该是纯粹的，也就是说，在render函数内不应该修改组件state，不读写DOM信息，也不与浏览器交互。如果需要交互，应该在生命周期中进行交互。

 

--------------------------------

生命周期

过程中涉及三个主要的动作术语：

• mounting:表示正在挂接虚拟DOM到真实DOM。
• updating:表示正在被重新渲染。
• unmounting:表示正在将虚拟DOM移除真实DOM。

-----------------------------------------

constructor( )-----super( )的基本含义

constructor( )——构造方法

       这是ES6对类的默认方法，通过 new 命令生成对象实例时自动调用该方法。并且，该方法是类中必须有的，如果没有显示定义，则会默认添加空的constructor( )方法。

super( ) ——继承

      在class方法中，继承是使用 extends 关键字来实现的。子类 必须 在 constructor( )调用 super( )方法，否则新建实例时会报错。

     报错的原因是：子类是没有自己的 this 对象的，它只能继承自父类的 this 对象，然后对其进行加工，而super( )就是将父类中的this对象继承给子类的。没有 super，子类就得不到 this 对象。

---------------------------------------------------------------

this.props对象的属性与组件的属性一一对应，但有一个例外，就是this.props.children属性。它表示组件的所有子节点。

件的属性是可以接收任何值的，但有时候我们希望对外界父级组件传递进来的属性数据进行限定，比如希望name属性不能缺少、onClick属性必须是函数类型等，这对确保组件被正确使用非常有意义。为此React引入了propTypes机制。React.PropTypes提供各种验证器（validator）来验证传入数据的有效性。当向props传入无效数据时，React会在JavaScript控制台抛出警告

 

getDefaultProps方法可以用来设置组件属性的默认值。