初识react

2017-02-03 本文已影响35人 Lusia_

react官网：
https://facebook.github.io/react/
内容来源：
http://www.ruanyifeng.com/blog/2015/03/react.html

React 可以在浏览器运行，也可以在服务器运行

一、react网页源码（html模板）

<! DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    //React核心库
    <script src="../build/react-dom.js"></script>
    //提供与 DOM 相关的功能
    <script src="../build/browser.min.js"></script>
    //将 JSX 语法转为 JavaScript 语法
     //以上3个必须首先加载
  </head>
  <body>
    <div id="example"></div>
    //type属性为text/babel，因为react有自己的JSX语法，与javascript不兼容。凡使用JSX的地方，都要用 type="text/babel"
    <script type="text/babel">
      // ** 代码开始地方 **
    </script>
  </body>
</html>

二、模板转html语言

ReactDOM.render用于将模板转为 HTML ，并插入d到指定 DOM 节点中。

ReactDOM.render(
        <h1>Hello, react</h1>,
        document.getElementById('example')
      );

有2个参数：
ReactDOM.render(
       模板,
       插入位置
      );

三、JSX语法

1、JSX语法规则：遇到html标签（以<开头）用html语法解析，遇到代码块（以{开头）用js解析

var itnames = ['react','html','css'];
      ReactDOM.render(
       <div>
         {
           itnames.map(function (name) {
             return <p>hello, {name}</p>
           })
         }
       </div>,
       document.getElementById('example')
      );

Paste_Image.png

2、JSX允许直接在模板插入js变量，若变量是一个数组，则会展开显示数组所有元素

var arr = [
        <h1>Hello world!</h1>,
        <h2>React is awesome</h2>,
      ];
      ReactDOM.render(
        <div>{arr}</div>,
        document.getElementById('example')
      );

Paste_Image.png

四、组件

React.createClass()方法：生成一个组件

var HelloMessage = React.createClass({
    render: function () {
       return <h1>hello {this.props.name} {this.props.className}</h1>;
    }
});
ReactDOM.render(
   <HelloMessage name="wy" className="ceshjo"/>,
   document.getElementById('example')
);

注意：

组件类的第一个字母必须大写
组件类只能包含一个顶层标签
组件的属性可以在组件类的 this.props 对象上获取
class 属性需写成 className ，for 属性需写成 htmlFor ，因为 class 和 for 是 JavaScript 的保留字。

五、this.props.children

表示组件的所有子节点
返回的值有3种：（注意处理）

undefined 组件没有子节点
object 组件只有一个子节点
array 组件有多个子节点
用React.Children.map 来遍历子节点，就无需考虑上述问题

var NotesList = React.createClass({
        render: function() {
          return (
            <ol>
              {
              /// this.props.children.map(function (child) {
                React.Children.map(this.props.children, function (child) { 
                  return <li>{child}</li>;
                })
              }
            </ol>
          );
        }
      });
      ReactDOM.render(
        <NotesList>
          <span>hello</span>//组件的子节点
          <span>world</span>
        </NotesList>,
        document.getElementById('example')
      );

Paste_Image.png

六、PropTypes

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

var data = 123;
      var MyTitle = React.createClass({
        propTypes: {
         //title属性是必须的，且它的值必须是字符串
          title: React.PropTypes.string.isRequired,
        },
        render: function() {
          return <h1> {this.props.title} </h1>;
        }
      });
      ReactDOM.render(
        <MyTitle title={data} />,
        document.getElementById('example')
      );

上述代码就会打印出警告

Paste_Image.png
getDefaultProps用来设置组件属性的默认值

var MyTitle = React.createClass({
  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },
  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});
ReactDOM.render(
  <MyTitle />,
  document.body
);

七、获取真实的DOM节点

组件不是真实的DOM节点，而是存在于内存中的一种数据结构，即虚拟DOM。
只有将其插入文档之后，才会成为真实的DOM。
react中，所有DOM的变动都先在虚拟DOM上发生，然后再将实际发生变动的部分反映在真实DOM上。（提高性能）

ref属性：

var MyComponent = React.createClass({
  handleClick: function() {
    //this.refs.[refName]  获取真实的DOM节点
    this.refs.myTextInput.focus();
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input type="button" value="输入框获得焦点" onClick={this.handleClick} />
      </div>
    );
  }
});
ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

注意：

必须等到虚拟 DOM 插入文档以后，才能使用这个this.refs.[refName]属性

八、this.state

将组件看成一个状态机，一开始有一个初始状态，然后用户互动导致状态变化，从而触发重新渲染UI

      var LikeButton = React.createClass({
          getInitialState: function() {
            return {liked: false};
          },
          handleClick: function(event) {
            this.setState({liked: !this.state.liked});
          },
          render: function() {
            var text = this.state.liked ? 'like' : 'haven\'t liked';
            return (
              <p onClick={this.handleClick}>
                You {text}.
              </p>
            );
          }
        });
        ReactDOM.render(
          <LikeButton />,
          document.getElementById('example')
        );

getInitialState：定义初始化状态，是一个对象，可以通过this.state读取
this.setState：修改状态值，自动调用render再次渲染组件

九、表单

var Input = React.createClass({
        getInitialState: function() {
          return {value: 'Hello!'};
        },
        handleChange: function(event) {
          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('example'));

定义一个 onChange 事件的回调函数，通过
event.target.value 读取用户输入的值，textarea 元素、select元素、radio元素都属于这种情况

十、组件的生命周期

3个状态

1、Mounting：已插入真实 DOM
2、Updating：正在被重新渲染
3、Unmounting：已移出真实 DOM

每个状态有两种处理函数

will 函数在进入状态之前调用
did 函数在进入状态之后调用

componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()

componentWillReceiveProps(object nextProps)
//已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)
//组件判断是否重新渲染时调用

示例：

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 (
           // 第一个{}表示这是javascript，第二个{}表示样式对象
            <div style={{opacity: this.state.opacity}}>
              Hello {this.props.name}
            </div>
          );
        }
      });
      ReactDOM.render(
        <Hello name="world"/>,
        document.getElementById('example')
      );

十一、ajax

组件的数据来源，通常是通过 Ajax 请求从服务器获取；
用 componentDidMount 方法设置 Ajax 请求；
等到请求成功，再用 this.setState 方法重新渲染 UI

var UserGist = React.createClass({
  getInitialState: function() {
    return {
      username: '',
      lastGistUrl: ''
    };
  },

  componentDidMount: function() {
   //    （请求接口地址，回调函数）
    $.get(this.props.source, function(result) {
      var lastGist = result[0];   //result 结果列表
      if (this.isMounted()) {
        this.setState({
          username: lastGist.owner.login,
          lastGistUrl: lastGist.html_url
        });
      }
    }.bind(this));
  },

  render: function() {
    return (
      <div>
        {this.state.username}'s last gist is <a href={this.state.lastGistUrl}>here</a>.
      </div>
    );
  }
});

ReactDOM.render(
  <UserGist source="请求接口地址" />,
  document.getElementById('example')
);

初识react

一、react网页源码（html模板）

二、模板转html语言

三、JSX语法

四、组件

五、this.props.children

六、PropTypes

七、获取真实的DOM节点

八、this.state

九、表单

十、组件的生命周期

十一、ajax

猜你喜欢

热点阅读