React基础记录

React基于状态实现对DOM的控制和渲染   （以数据驱动视图的开发方式）

组件状态分为两种：一种是组件间的状态传递，另一种是组件内部状态，这两种状态使用props和state表示

props：组件中的props是一种父级向子级传输数据的一种方式，在组件内部，可以通过this.props获取属性对象

state:state是React组件的一个对象，用户界面会随着state的变化而变化，state只能在组件内部中使用，一般用于组件内部的状态维护，更新组件内部的数据，状态，更新子组件的props;

this.state 获取   this.setState 设置

React允许传入对象，如果对象是一个数组的话，可以直接解析数组

var h1Arr = [<h1>第一个h1</h1>,<h1>第二个h1</h1>,<h1>第三个h1</h1>];

ReactDOM.render(<div>{h1Arr}</div>,

            document.getElementById('root')

        )

延展操作符   "..." 这种方式可以很方便的为组件指定多个属性

...后应该跟一个对象，而且对象的键名应该和this.props.键名一样

var props = {

                name1 : "jack",

                name2 : "danny"

            };

         

        var HelloWorld = React.createClass({

            render:function(){

                return (

                    <div>Hello,{this.props.name1},{this.props.name2}</div>

                );

            }

        });

        ReactDOM.render(<HelloWorld {...props}/>,document.getElementById('root'))

组件添加样式：

内联：遵循驼峰命名的方式

外部样式：class是es6的关键字，在es5中是保留关键字，所以需将其修改成className

eg：

   var styleObj = {

            'color':'red'

        };

<div style={{styleObj}}>Hello React <p className="pc">早上好</p></div>

<div style={{color:'red'}}>Hello React <p className="pc">早上好</p></div>

propTypes：类型检测(prop校验)，限制文本类型是否为对象或者字符串等等。。。。

propTypes:{

        //设定输入的数据为字符串型，isRequired表示不能为空

   name:React.PropTypes.string.isRequired

 }

例子：

任何可以渲染的东西：数字，字符串，元素或数组（或片段）。

     optionalNode: React.PropTypes.node,

    React元素

     optionalElement: React.PropTypes.element,

     你也可以声明prop是某个类的实例。 内部使用的是JS的instanceof运算符。

     optionalMessage: React.PropTypes.instanceOf(Message),

    你可以通过将它作为枚举来确保你的prop被限制到特定的值。

     optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

     可以是许多类型之一的对象

     optionalUnion: React.PropTypes.oneOfType([

     React.PropTypes.string,

     React.PropTypes.number,

     React.PropTypes.instanceOf(Message)

     ]),

     某种类型的数组

     optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

     具有某种类型的属性值的对象

     optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

     采取特定样式的对象

     optionalObjectWithShape: React.PropTypes.shape({

     color: React.PropTypes.string,

     fontSize: React.PropTypes.number

     }),

     你可以用`isRequired`来连接到上面的任何一个类型，以确保如果没有提供props的话会显示一个警告。

     requiredFunc: React.PropTypes.func.isRequired,

     任何数据类型

     requiredAny: React.PropTypes.any.isRequired,

正在自学中，有错误的地方欢迎大神纠正，感谢~~