React Native学习第二天

零:组件的样式

/*

设置组件的样式,3种:

1,内联样式

2,对象样式

3,选择器样式

注意:在React和HTML5中设置样式时的书写格式是有区别的

**1,HTML5以;结尾

       React以,结尾

**2,HTML5中key,value都不加引号

       React中属于JavaScript对象,key的名字不能出现"-",需要使用驼峰命名法,如果value为字符串,需要加引号.

**3,HTML中,value如果是数字,需要带单位

      React中不需要带单位

*我们定义一个组件类,同时使用三种设置组件样式的方式

*需求:定义一个组件,分为上下两行显示内容

*<div> 内联样式:设置背景颜色,边框大小,边框颜色

 *        <h1></h1> 对象样式:设置背景颜色,字体颜色

*          <p></p>    选择器样式:设置字体大小

*</div>

****注意:在React中使用选择器样式设置组件样式时,属性名不能使用class,需要使用className替换,

               类似:使用htmlFor替换for

*/

一:复合组件
也叫组合组件,创建多个组件合成一个组件

/*

需求:定义一个组件WebShow,功能:输出网站的名字和网址,网址是一个可以点击的链接.

分析:定义一个组件WebName负责输出网站名字,定义组件WebLink显示网站的网址,并且可以点击

*/

//定义WebName组件

var WebName = React.creatClass({

     render:function() {

          return <h1>蓝鸥科技</h1>

}

});

//定义WebLink组件

var WebLink = React.createClass({

    render:function() {

        return <a href="http://www.lanou3g.com">http://www.lanou3g.com</a>

}

});

//定义WebShow组件

var WebShow = React.creatClass({

     render: function() {

        return (

            <div>

                    <WebName />

                     <WebLink />

             </div>

);

}

});

//渲染组件

ReactDOM.render(

       <WebShow />,

        document.getElementById("container")

);

二:props(一个属性对象)

/*

React可以看成MVC中的View层,一般与数据层无关,但是组件的两个属性和数据有关,(1)props(2)state

props是组件自身的属性,一般用于嵌套的内外层组件中,负责传递信息(通常是由父层组件向子层组件传递)

注意:props对象中的属性与组件的属性一一对应,不要直接去修改props中属性的值.

*/

/*

需求:定义一个组件WebShow,功能:输出网站的名字和网址,网址是一个可以点击的链接.

分析:定义一个组件WebName负责输出网站名字,定义组件WebLink显示网站的网址,并且可以点击

思路:

1,给WebShow设置两个属性,wname,wlink

2,WebShow的props对象增加了两个属性值

3,WebName从WebShow的props对象中获取wname的值,即网站的名称

4,WebLink同理

*/

//定义WebName

var WebName = React.creatClass({

     render:function() {

          return <h1>{this.props.webname}</h1>

}

});

//定义WebLink

var WebLink = React.createClass({

    render:function() {

        return <a href={this.props.weblink}>{this.props.weblink}</a>

}

});

//定义Webshow

var WebShow = React.creatClass({

     render: function() {

        return (

            <div>

                    <WebName webname={this.props.wname} />

                     <WebLink weblink={this.props.wlink}/>

             </div>

);

}

});

//渲染

ReactDOM.render(

       <WebShow wname="蓝鸥科技" wlink="http://www.lanou3g.com"/>,

        document.getElementById("container")

);

/*

...this.props

props提供的语法糖,可以将父组件中的全部属性都复制给子组件

需求:定义一个组件Link,Link组件中只包含一个<a>,我们不给<a>设置任何属性,所有属性圈住从父组件复制得到

*/

var Link = React.createClass({

    render: function() {

     return <a {...this.props}>{this.props.name}</a>

}

});

ReactDOM.render(

   <Link href="http://www.lanou3g.com" name="蓝鸥科技" />,

document.getElementById("container")

);

三:children

/*

this,props.children

children是一个例外,不是跟组件的属性对应的.

表示组件的所有子节点

HTML中有在一种标签:列表<ul><ol><li>

定义一个列表组件,列表项中现实的内容,以及列表项的数量都由外部决定

*/

var ListComponent = React.creatClass({

   render:function(){

   return (

       <ul>

              {

                  /*

                     列表项数量以及内容不确定,在创建模板时才能确定

                     利用this.props.children从父组件中获取需要展示的列表项内容

                       获取列表项内容后,需要遍历children,逐项进行设置

                         使用React.Children.map方法

                         返回值:数组对象,这里数组中的元素是<li>

                   */

               React.Children.map(this.props.children,function(children){

        //children是遍历得到的父组件的子节点

          return <li>{children}<li/>

})

               }

       </ul>

);

}

});

ReactDOM.render(

   (

     <ListComponent>

           <h1>蓝鸥科技</h1>

            <a href="http://www.lanou3g.com">http://www.lanou3g.com</a>

      </ListComponent>

   ),

document.getElementById("container")

);

四:属性验证

/*

propTypes

组件类的属性

用于验证组件实例的属性是否符合要求

*/

var ShowTitle = React.creatClass({

   propTypes:{

        //title数组类型必须为字符串

         title:React.PropTypes.String.isRequired

},

    render: function() {

          return <h1>{this.props.title}</h1>

}

});

 ReactDOM.render{

  <ShowTitle title="123"/>,

   document.getElementById("container")

};

/*

设置组件属性的默认值

通过实现组件的getDefaultProps方法,对属性设置默认值

*/

var MyTitle = React.createClass({

   getDefaultProps:function() {

   return {

     title:"蓝鸥"

};

},

  render:function() {

       return <h1>{this.props.title}</h1>

}

});

ReactDOM.render(

    <MyTitle />,

     document.getElementById("container")

);

五:state

/*

事件处理

react中的事件名称,首字母小写,驼峰命名法

案例:定义一个组件,组件中包含一个button,给button绑定onclick事件

*/

var MyButton = React.createClass({

   handleClick:function() {

       alert("点击按钮触发的效果");

},

   render:function(){

      return (

         <button onClick={this.handleClick}>{this.props.buttonTitle}</button>

);

}

});

ReactDOM.render(

  <MyButton buttonTitle="按钮" />,

   document.getElementById("container")

);

/*

state 状态

props

组件自身的属性

this.state

*/

//需求:创建一个CheckButton的组件,包含一个Checkbox类型<input>

//复选框在选中和未选中两种状态下会显示不同的文字,即根据状态渲染

var CheckButton = React.createClass({

   //定义初始状态

     getInitialState: function() {

       return {

              //在这个对象中设置的属性,将会存储在state中

              //默认:未选中

                 isCheck:false

}

},

//定义事件绑定的方法

handleChange: function() {

     //修改状态值,通过this.state读取设置的状态值

    this.setState({

         isCheck:!this.state.isCheck

});

},

render: function() {

    //根据状态值设置显示的文字

//在jsx语法中,不能直接使用if,使用三目运算符

     var text = this.state.isCheck ? "已选中" : "未选中";

   return (

       <div>

             <input type="checkbox" onChange={this.handleChange} />

              <text>

        </div>

);

}

});

ReactDOM.render(

      <CheckButton />,

       document.getElementById("container")

);

//当state发生变化时,会调用组件内部的render方法.

六:表单

/*

需求:定义一个组件,将用户在输入框内输入的内容进行实时显示

分析:组件与用户交互过程中,存在状态的变化,即输入框的值

*/

var Input = React.createClass({

  getInitialState: function() {

   return {

       value:"请输入"

};

},

handleChange: function(event) {

  //通过event.target.value读取用户输入的值

    this.setState({

           value:event.target.value

});

},

render: function() {

     var value = this.state.value;

     return (

           <div>

                <input type="text" value={value} onChange={this.handleChange} />

                 <p>{value}</p>

           </div>

);

}

});

ReactDOM.render(

    <Input />,

     document.getElementById("container")

);

七:组件的生命周期

/*

生命周期:

1,组件生命周期三个状态:

Mounting:组件挂载,已插入真实 DOM

Updating:组件更新,正在被重新渲染

Unmounting:组件移出,已移出真实 DOM

2,组件的生命周期四个阶段

创建,实例化,更新,销毁

*/

/*

1,Mounting/组件挂载相关:|

   (1)componentWillMount

    组件将要挂载,在render之前执行,但只执行一次,即使多次重复渲染该组件,或者改变了组件的state

   (2)componentDidMount

组件已经挂载,在render之后执行,同一个组件重复渲染只执行一次

2,Updating/组件更新相关

    (1)componentWillReceiveProps(object nextProps)

已加载组件收到新的props之前调用,注意组件初始化渲染时则不会执行

    (2)shouldComponentUpdate(object nextProps,object nextState)

组件判断是否重新渲染时调用,该接口实际是在组件接收到了新的props或者新的state的时候会立即调用,然后通过

    (3)componentWillUpdate(object nextProps,object nextState)

组件将要更新

      (4)componentDidUpdate(object prevProps,object prevState)

组件已经更新

3,Unmounting/组件移除相关:

(1)componentWillUnmount

在组件要被移除之前的时间点触发,可以利用该方法来执行一些必要的清理组件将要移除

4,生命周期中与props和state相关:

(1)getDefaultProps 设置props属性默认值

(2)getInitialState 升值state属性初始值

*/

/*

生命周期各阶段介绍

*/

var Demo = React.creatClass({

/*

    一:创建阶段

         流程:

            只调用getDefaultProps方法

*/

getDefaultProps: function() {

   //在创建类的时候被调用,设置this.props的默认值

  console.log("getDefaultProps");

     return {};

},

/*

二:实例化阶段

流程:
getInitlalState

componentWillMount

render

componentDidMount

*/

getInitlalState: function() {

  //设置this.state的默认值

console.log("getInitlalState");

return nll;

},

componentWillMount: function(){

 //在render之前调用

console.log("componentWillMount");

},

render: function() {

//渲染并返回一个虚拟DOM

console.log("render");

return <div>Hello React</div>

},

componentDidMount: function(){

 //在render之后调用

//在该方法中,React会使用render方法返回的虚拟DOM对象创建真实的DOM结构

//可以在这个方法中读取DOM节点

console.log("componentDidMount");

},

/*

三:更新阶段

流程:

componentWillReceiveProps

shouldComponentUpdate   如果返回值是false,后三个方法不执行

componentWillUpdate

render

componentDidUpdate

*/

componentWillReceiveProps: function() {

 console.log("componentWillReceiveProps");

},

shouldComponentUpdate   : function() {

 console.log("shouldComponentUpdate");

return true;

},

componentWillUpdate

: function() {

 console.log("componentWillUpdate");

},

componentDidUpdate: function() {

 console.log("componentDidUpdate");

},

/*

销毁阶段

流程:

componentWillUnmount

*/

componentWillUnmount: function() {

 console.log("componentWillUnmount");

},

});

//第一次创建并加载组件

ReactDOM.render(

     <Demo />,    document.getElementById("container")

);

//重新渲染组件(相当于进行更新组件)

ReactDOM.render(

     <Demo />,    document.getElementById("container")

);

//移除组件

ReactDOM.unmpuntComponentAtNode(document.getElementById("container"));