你的位置:首页 > Java教程

[Java教程]React 基础入门,基础知识介绍

React不管在demo渲染还是UI上,都是十分方便,本人菜鸟试试学习一下,结合阮一峰老师的文章,写下一点关于自己的学习react的学习笔记,有地方不对的地方,希望各位大牛评论指出;

PS:代码包下载:

react包引入,在标签里引入包;

<html> <head>  <script src="../build/react.js"></script>  <script src="../build/react-dom.js"></script>  <script src="../build/browser.min.js"></script> </head> <body>  <div id="example"></div>  <script type="text/babel">    // ** Our code goes here! **  </script> </body></html>

首先,最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。凡是使用 JSX 的地方,都要加上 type="text/babel" 。

其次,上面代码一共用了三个库: react.js 、react-dom.js 和 Browser.js ,它们必须首先加载。其中,react.js 是 React 的核心库,react-dom.js 是提供与 DOM 相关的功能,Browser.js 的作用是将 JSX 语法转为 JavaScript 语法,这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。

 

当然 在最后编译的时候 可以直接使用JSx ,引入一个 JSXTransformer.js    就可以直type中看使用text/Jsx  这样的好处是在我的编译器(webstorm)中有关键词的颜色区分;

<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
ReactDOM.render(
<h1>Hello, world! </h1>,
document.getElementById('example')
);
</script>
</body>
</html>
 

1.基础语法:

ReactDom.render 工三个参数,第一个元素 ,第二个是绑定的元素,第三个是回调函数

JSX语法:遇到<>开头用 HTML语法解析,遇到{} 用javascript 解析;

 

 

 ReactDom.render(

 <div>

  {

names.map(function (name) {

//这里可以定义变量

      return <div>Hello, {name}!</div>

    })

  }

  </div>,

  document.getElementById('example')

)

 

 

2.组件

var NewString = React.createClass({
    render: function () {
 var s=<h1 className="two" id="two">
     <i id="one" >MMMMMM{this.id},{this.props.name},{this.props.id},{this.props.className}
     </i></h1>;
        return s;
    }
})

组件的属性可以在组件类的 this.props 对象上获取。

就是 class 属性需要写成 className ,for 属性需要写成 htmlFor ,

必须包括一个且 只能包括一个顶层标签;

 

 

组件可使用单双标签,没区别,但是当需要获取组件的子元素的时候,必须使用双标签。

 

双标签获取组件下面的子类:

我们可以用 React.Children.map 来遍历子节点,而不用担心 this.props.children 的数据类型是 undefined 还是 object

var NotesList = React.createClass({
    render: function () {
        return (
                <p>
                    {
                    React.Children.map(this.props.children, function (child) {
                       console.log(child)
                        return <p>{child}</p>;
                    })
                }
                </p>
        );
    }
});
ReactDOM.render(
        <NotesList>
       <span id="children">hello</span>
          <span>world</span>
        </NotesList>,
        document.getElementById('example')
);

 

 

3.PropTypes

var MyTitle = React.createClass({

  propTypes: {

    title: React.PropTypes.string.isRequired,

  },

 

  render: function() {

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

   }});

 

上面的Mytitle组件有一个title属性。PropTypes 告诉 React,这个 title 属性是必须的,而且它的值必须是字符串。现在,我们设置 title 属性的值是一个数值。

这样一来,title属性就通不过验证了 

 

4.getDefaultProps

  getDefaultProps : function () {

    return {

      title : 'Hello World'

    };

  },

 

  render: function() {

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

   }});

 

getDefaultProps 设置默认title的值。  

ReactDOM.render(

  <MyTitle />,

  document.body);

当组件上没有title,this.props.title的值等于默认值  :Hello World;

ReactDOM.render(

  <MyTitle title=“New title”/>,

  document.body);

当组件上有title,this.props.title的值  :New title;

 

5、获取真实的DOM节点ref

var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput111.focus();
    this.refs.pp.style.color="red";
  },
  output:function(){
    alert("wo xtet")
  },
  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput111"  onClick={this.output} />
        <input type="button" value="Focus the text input" onClick={this.handleClick}/>
        <p ref="pp">{this.props.title}</p>
      </div>
    );
  }
});ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。并且可以操作这个DOM,和原生操作Js一样

6、This.state

在组件内可以定义状态,当用户改变这个状态的时候,页面会重新渲染。

getInitialState  是关键字,来定义组件状态

var LikeButton = React.createClass({
  getInitialState: function() {
    return {
      liked11: false,
      love:true
    };
  },
  handleClick: function(event) {
    this.setState({liked11: !this.state.liked11});
    this.setState({love:!this.state.love})
  },
  render: function() {
    var text = this.state.liked11 ? 'like' : 'haven\'t liked';
   var text1=this.state.love?"love":"hate";
    return (
      <p>
        You {text} this. Click to toggle.
        <br/>
        <span onClick={this.handleClick}>you {text1} this.clcik to tpggle</span>
      </p>
    );
  }
});

当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。

由于 this.props 和 this.state 都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性。

 

7.表单

this.props.value 读取组件的属性(代码黄色处),而要定义一个 onChange 事件的回调函数,通过 表单元素用 event.target.value

非表单用event.target.innerHTMl 操作节点一样方式

    var num=12;
  var Input = React.createClass({
  getInitialState: function() {
    return {
    value: 'Hello!',
    value1:num,
    };
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
    this.setState({value1:this.state.value1+=1});
  },
  render: function () {
    var value = this.state.value;
    return (
      <div value="div111" id="ee" name="owow">
        <input id="mom" type="text" value={value} onChange={this.handleChange} />
        <div>{this.state.value1}</div>
        <p onChange={this.handleChange}>{value}</p>
       <span>{this.props.value}</span>
      </div>
    );
  }
});

ReactDOM.render(<Input value="[email protected]"/>, document.getElementById('example'));

8.组件的生命周期

组件的生命周期分成三个状态:

  • Mounting:已插入真实 DOM
  • Updating:正在被重新渲染
  • Unmounting:已移出真实 DOM

React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。

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

此外,React 还提供两种特殊状态的处理函数。

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

 

附带代码:

   var Hello = React.createClass({
        getInitialState: function () {
          console.log(this);
          return {
            opacity: 1.0
          };
        },
        componentWillMount: 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) 你可以当做是 使用外部的this(React组件的)覆盖函数中的this.
          }.bind(this), 100);
        },
        render: function () {
          return (
            <div style={{opacity: this.state.opacity}}>
              Hello {this.props.name}
            </div>
          );
        }
      });