react基本认知

一、如何配置react的开发环境

到react官网上下载文件，找不到的话可以直接点击这个链接 http://reactjs.cn/react/downloads.html

1.引入react核心库

<script type="text/javascript" src="react.js的文件路径"></script>

2.引入react的DOM操作

<script type="text/javascript" src="react-dom.js的文件路径"></script>

3.把JSX语法转换成浏览器能识别的JavaScript

<script type="text/javascript" src="browser.min.js的文件路径"></script>

二、什么是JSX，JSX如何使用

1. react使用JSX来替代常规的JavaScript，JSX是一个语法，不是一门新的语言。JSX是一个看起来很像XML的JavaScript语法的扩展，让你可以用HTML语法去写Javascript函数调用，我们不需要一定去使用JSX，单它由以下优点：

　　（1）JSX执行更快，因为它在编译为JavaScript代码后进行了优化。

　　（2）它的类型安全，在编译过程中就能发现错误

　　（3）使用JSX编写模板更加简单快速

2. JSX如何使用

　　(1) 直接在页面中编译JSX

<script type="text/babel"></script>

　　(2).把JSX代码放在单独的一个文件上，在HTML中引入该文件

<script type="text/babel" src="需要引入的文件路径"></script>

三、什么是组件，如何封装一个组件

1.组件：在react中将一些重用的DOM结构进行封装就成了组件(component)，一个组件就是一个组件类，首字母必须大写，用驼峰命名法。

2.如何封装一个组件：

//构建一个组件类使用React.createClass()包含一个必须得方法是render，它可以给我们返回一个或一组能够渲染的DOM结构

//创建一个组件，叫做HelloMessage，只包括一个h1
var HelloMessage = React.createClass({
    render: function() {
        return <h1>hello message</h1>
    }
})

//在react中输出多个同级标签，一定要加上父级
var HelloMessage = React.createClass({
　　render: function() {
    　　return (
        　　<div>
           　　<h1>我是标题</h1>
           　　<a href="###">百度</a>
        　　</div>
        )
    }
})    

ReactDOM.render(
　<HelloMessage/>,
24　　document.getElementById("container")
)

3.创建一个复合组件

/*
* 复合组件： 可以把多个组件相互组合，这就是复合组件
* */
/*
* 构建一个组件叫做WebShow
* 这个组件是由WebName和WebLink这两个组件组成
* WebName用h1表示，WebLink用a标签表示
 */

    var WebName = React.createClass({
        render: function() {
            return <h1>百度</h1>
        }
    });

    var WebLink = React.createClass({
        render: function() {
            return <a href="http://www.baidu.com">百度</a>
        }
    });

    var WebShow = React.createClass({
        render: function() {
            return (
                <div>
                    <WebName/>
                    <WebLink/>
                </div>
            )
        }
    })

    ReactDOM.render(
        <WebShow/>,
        document.getElementById("container")
    )

4. react的css样式可以分为三类

　　(1)内联样式

　　(2)对象样式

　　(3)选择器样式

    
//csss head里面style的样式设置

<style>
    .act{
        color: yellow;
        background-color: #000;
    }
</style>

//js中的代码
var styles = {

        color: "blue",
        backgroundColor:"pink"
    }

    var StyleTest = React.createClass({
        render: function() {
            return (
                <div style={{backgroundColor:"red",borderWidth:"1px",borderColor:"green",borderStyle:"solid"}}>
                    <h1 style={styles}>我是标题</h1>
                    <p className="act">我是段落</p>
                </div>
            )
        }
    })

    ReactDOM.render(
        <StyleTest/>,
        document.getElementById("container")
    )

注意点：

　　react的css样式中没有class，只有className

四、props是什么，如何使用，属性中的children是做什么的，如何设置默认属性

1. props: 表示的是一个组件的属性，实质上就是从父组件传递一些值到子组件上，一般情况下props最好不要更改

2.使用时this.props this代表父组件，props是一个数组，包含了父组件上的所有属性，并且与父组件上的属性一一对应

3.this.props.children的返回值会根据子节点的数量放回undefined，object， array。所以react提供了一个react.children的方法专门处理this.props.children

4.设置默认属性：用propType:{设置props的数据类型}，用getDefaultProps: function(){设置该组件的初始属性}

//在WebShow上添加两个属性wname和wlink
//在WebName上有一个属性webname
//在WebLink上有一个属性weblink

var WebName = React.createClass({
        render: function() {
            return <h1>{this.props.webname}</h1>
        }
    });

 var WebLink = React.createClass({
 　　render: function() {
 　　return <a href={this.props.weblink}>{this.props.weblink}</a>
 　　}
　});

  var WebShow = React.createClass({
  　　render: function() {
      　　return (
          　　<div>
         　　　　<WebName webname={this.props.wname}/>
              　<WebLink weblink={this.props.wlink}/>
          　　</div>
         )
       }
  })

　 ReactDOM.render(
　　　　<WebShow wname="百度" wlink="http://www.baidu.com"/>,
 　document.getElementById("container")
   )

设置默认属性

var PropsTest = React.createClass({
        propTypes:  {
            //设置props的数据类型
            age: React.PropTypes.number.isRequired
        },
        getDefaultProps: function() {
            //设置该组件属性的初识值
            return {
                name:"李四",
                age: 38
            }
        },
        render: function () {
            return <h1>hello {this.props.name}!年龄是{this.props.age}</h1>
        }
    });

//    var age = 18;
    ReactDOM.render(
//      <PropsTest name="zhangsan"/>
        <PropsTest/>,
        document.getElementById("container")
    )

五、state是什么？如何使用

1.组件免不了要与用户互动，React的一大创新就是将组件看成是一个状态机。通过与用户的交互实现不同状态，然后渲染UI，让用户界面和数据保持一致。在React里，只需要更新组件的state，然后根据新的state重新渲染用户界面

2.组件的7个方法：

　　设置状态：setState

　　替换状态：replaceState

　　设置属性：setProps

　　替换属性：replaceProps

　　强制更新：forceUpdate

　　获取DOM节点：getDOMNode

　　判断组件挂载状：isMounted

六、组件的生命周期

//以下实例在 Hello 组件加载以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒重新设置组件的透明度，并重新渲染：

var Hello = React.createClass({
  getInitialState: function () {
    return {
      opacity: 1.0
    };
  },
 
  componentDidMount: function () {
    this.timer = setInterval(function () {
      var opacity = this.state.opacity;
      opacity -= .05;
      if (opacity < 0.1) {
        opacity = 1.0;
      }
      this.setState({
        opacity: opacity
      });
    }.bind(this), 100);
  },
 
  render: function () {
    return (
      <div style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </div>
    );
  }
});
 
ReactDOM.render(
  <Hello name="world"/>,
  document.body
);

//以下实例初始化 state ， setNewnumber 用于更新 state。所有生命周期在 Content 组件中。
var Button = React.createClass({
  getInitialState: function() {
    return {
      data:0
    };
  },
  setNewNumber: function() {
    this.setState({data: this.state.data + 1})
  },
  render: function () {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
    }
})
var Content = React.createClass({
  componentWillMount:function() {
      console.log('Component WILL MOUNT!')
  },
  componentDidMount:function() {
       console.log('Component DID MOUNT!')
  },
  componentWillReceiveProps:function(newProps) {
        console.log('Component WILL RECEIVE PROPS!')
  },
  shouldComponentUpdate:function(newProps, newState) {
        return true;
  },
  componentWillUpdate:function(nextProps, nextState) {
        console.log('Component WILL UPDATE!');
  },
  componentDidUpdate:function(prevProps, prevState) {
        console.log('Component DID UPDATE!')
  },
  componentWillUnmount:function() {
         console.log('Component WILL UNMOUNT!')
  },
 
    render: function () {
      return (
        <div>
          <h3>{this.props.myNumber}</h3>
        </div>
      );
    }
});
ReactDOM.render(
   <div>
      <Button />
   </div>,
  document.getElementById('example')
);