react小项目

本章要讲述一个评价栏的制作。

首先先简单写一个ract组件来试试。

index.html

<!DOCTYPE html>

<html>

<head>

    <title>Hello React</title>

    <script src="../js/jquery.min.js"></script>

    <script src="../js/JSXTransformer.js"></script>

    <script src="../js/react-0.13.4.min.js"></script>

    <script src="../js/react-dom-0.14.0.js"></script>

</head>

<body>

<div id="content"></div>

<script src="../component/CommentBox.js" type="text/jsx"></script>

</body>

</html>

CommentBox.js

var CommentBox = React.createClass({

    render: function() {

        return (

            <div className="commentBox">

                Hello, world! I am a CommentBox.

            </div>

        );

    }

});

React.render(

    <CommentBox />,

    document.getElementById('content')

);

此处要注意首先因为

1.CommentBox.js中获取了content所已在index文件中引入CommentBox.js文件要放在content后面。

2.reactDOM.render()也可以，但是要引入相应的react-dom.js文件，其次版本号要在13以后

3.comment.js文件的type='text/jsx'如果引入了babel文件，也可以写text/babel. babel.js和JSXTransformer.js可以互换的，对应的type也要改成jsx或者babel。

注意的知识点汇总：

React.render和ReactDOM.render的区别。

props的用法：是由父元素传进来的，在本身的组件内不能修改。getDefaultProps初始化时执行一次，后面不在执行。

state的用法：是组件的私用属性，可以在组件中修改,this.setState({});getInitialState()这个只是初始化的时候执行一次，后面就不执行了。

React将组件的生命周期大概分为三个阶段：创建时，存在期及销毁时。每个阶段都对应着特定的钩子函数做出响应，接下来详细看一下这三个阶段

创建时

一个实例初始化时调用的方法与其他各个后续实例创建时调用的方法略有不同。当我们首次初始化一个组件类的时候，会依次调用如下方法：

getDefaultProps

getInitialState

componentWillMount

render

componentDidMount

对于该组件类的所有后续应用，对比组件初始化过程，除了getDefaultProps方法，其他方法均会被调用：(即getDefaultPropszh这个方法只会在创建第一次实例时执行一次，后续实例的初始化结果跟第一次的一样。)

上面讲述了依次执行，即componentWillMount是在组件渲染成正真的DOM之前执行，componentDidMount是在组件成功渲染后开始执行的

我们一般会在componentDidMount方法中执行一些ajax操作，例如

componentDidMount: function() {

    $.ajax({

      url: this.props.url,

      dataType: 'json',

      success: function(data) {

        this.setState({data: data});

      }.bind(this),   这里要注意必须bind(this)将function里面的this转换成组件中的this对象。

      error: function(xhr, status, err) {

        console.error(this.props.url, status, err.toString());

      }.bind(this)

    });

  },

getInitialState

componentWillMount

render

componentDidMount

存在期

初始化之后的组件会随着应用状态的改变，逐渐受到影响，会有如下方法依次执行：

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

销毁时

最后，该组件使用完成后，componentWillUnmount方法将会被调用。

这里面可以将一些事件监听给去除掉。

更多详信息可以参考链接http://www.jianshu.com/p/9bf6d723cfbe

this.props.children

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

var NotesList = React.createClass({

  render: function() {

    return (

      <ol>

      {

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

          return <li>{child}</li>;

        })

      }

      </ol>

    );

  }

});

ReactDOM.render(

  <NotesList>

    <span>hello</span>

    <span>world</span>

  </NotesList>,

  document.body

);

　　上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取，运行结果如下。

这里需要注意， this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。

React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。

React.Children.map(this.props.chiildren,function(item.index){});

获取真实的DOM节点

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。

但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性

var MyComponent = React.createClass({

  handleClick: function() {

    this.refs.myTextInput.focus();

  },

  render: function() {

    return (

      <div>

        <input type="text" ref="myTextInput" />

        <input type="button" value="Focus the text input" onClick={this.handleClick} />

      </div>

    );

  }

});

ReactDOM.render(

  <MyComponent />,

  document.getElementById('example')

);

上面代码中，组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。

需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName] 属性。

React 组件支持很多事件，除了 Click 事件以外，还有 KeyDown 、Copy、Scroll 等

回调函数：如何从子元素中传递信息到父元素中，方法是在父元素上绑定一个方法，传递到子元素中，然后子元素在特定的情况下调用它(此时可以传入一些参数作为函数的形参)，触发函数执行，这时就会回调父元素中的那个方法(此时就可以调用子元素传过来的形参了)。

巴特西

react小项目

创建时

存在期

销毁时

this.props.children

获取真实的DOM节点

最新文章

热门文章