您的位置:首页 > Web前端 > React

React基础记录

2017-06-06 10:05 330 查看
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,

正在自学中,有错误的地方欢迎大神纠正,感谢~~
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: