React学习总结

2018-03-29 | 阅读：次

一、React库引用

react.min.js：React 的核心库
react-dom.min.js：提供与 DOM 相关的功能
babel.min.js：Babel将Rract需要的语法JSX，转码为浏览器认识的语法；可以将ES6代码转为ES5代码，这样我们就能在目前不支持ES6浏览器上执行React代码
如果我们需要使用 JSX，则 <script type="text/babel">……</script>。

二、常用函数语法

React 关键词：

Props
state
render
组件
属性传参：一般是父组件(state或者函数)—传参—>子组件props
父组件中的render() return时，通过属性赋值–>将组件中的state（或者函数）传递到子组件中，子组件通过this.props.属性名获取；

ReactDOM.render

将一个HTML标签渲染到真实的DOM节点：

var myDivElement = <div className="foo" />;
ReactDOM.render(
  myDivElement,
  document.getElementById('example')
);

React.createClass

创建React组件类：

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));

类继承

ES6 语法：class MyComponent extends React.Component 创建React组件类；
表示自定义类MyComponent继承了基类React.Component的所有属性和方法：
render()：return自定义组件的输出样式
<MyComponent/>实例化自定义组件类。

class MyComponent extends React.Component {
  render(){
    return <h1>Hello World</h1>;
  }
  //或者：
  /*render:function(){
    return <h1>Hello World</h1>;
  }*/
};
ReactDOM.render(
  <MyComponent/>,
  document.getElementById('example')
);

Props

this.props：传参–>例如：属性name的值可以通过this.props.name获得。
getDefaultProps()：为 props 设置默认值

注意：在添加属性时，class属性需要写成className，for属性需要写成htmlFor，这是因为class和for是JavaScript的保留字。

state状态

getInitialState：设置初始state状态。
constructor：组件类构造函数，一旦实例化组件调用，可设置this.state的初始状态。
this.setState：重置this.state，一旦调用该方法，就会自动引发组件重新渲染。

示例：

<script type="text/babel">
  var LikeButton = React.createClass({
    getInitialState: function() {
      return {liked: false};
    },

   /*或者：
	constructor(...args) {
  	  super(...args);
  	  this.state = {
      liked: false
      };
    }*/


    handleClick: function(event) {
      this.setState({liked: !this.state.liked});
    },

    render: function() {
      var text = this.state.liked ? '喜欢' : '不喜欢';
      return (
        <p onClick={this.handleClick}>
          你<b>{text}</b>我。点我切换状态。
        </p>
      );
    }
  });

  ReactDOM.render(
    <LikeButton />,
    document.getElementById('example')
  );
</script>

React组件API

setState
replaceState
setProps
replaceProps
forceUpdate:强制更新，调用render()重新渲染组件
findDOMNode：返回DOM元素，可获取已经挂载到DOM中的组件
isMounted：判断组件挂载状态，返回bool值

组件生命周期

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

方法有：

componentWillMount：组件渲染前被调用
componentDidMount：组件第一次渲染后调用，只执行一次
componentWillUpdate：组件更新前被调用（收到新的props或者state但还没有render时）
componentDidUpdate：组件更新后调用
componentWillUnmount：组件从DOM中移除的时调用。
componentWillReceiveProps：组件接受新的参数时调用
shouldComponentUpdate：返回一个bool值，在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。

ref属性

一般使用方法：在render()的返回值上绑定ref属性;

<input ref="myInput" />

示例：

var MyComponent = React.createClass({
  handleClick: function() {
    // 使用原生的 DOM API 获取焦点
    this.refs.myInput.focus();
  },
  render: function() {
    //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
    return (
      <div>
        <input type="text" ref="myInput" />
        <input
          type="button"
          value="点我输入框获取焦点"
          onClick={this.handleClick}
        />
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

通过绑定ref属性，可以获得组件的子组件或者原生DOM节点。

三、实例

实例1

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')
);

这里创建了两个组件：Content和Button，其中Content是Button的子组件；
Button中的状态this.state.data通过onClick事件在不断加一
Button中，Content子组件通过属性myNumber = {this.state.data}传参给子组件中；
Content子组件通过this.props.myNumber调用；
关于生命周期：
- 初始化挂载组件：1.componentWillMount；2.componentDidMount
- 参数改变：1. componentWillReceiveProps；2.componentWillUpdate；3.componentDidUpdate

实例2

var HelloMessage = React.createClass({
  getInitialState: function() {
    return {value: 'Hello Runoob!'};
  },
  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} />
            <h4>{value}</h4>
           </div>;
  }
});
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

初始render时：将this.state.value的值给input和h4渲染显示；
当input里的内容发生改变时：调用handleChange函数，通过this.setState改变state的值，重新render

实例3

父组件中：state和函数通过属性，传参到子组件中：

var Content = React.createClass({
  render: function() {
    return  <div>
            <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} />
            <h4>{this.props.myDataProp}</h4>
            </div>;
  }
});
var HelloMessage = React.createClass({
  getInitialState: function() {
    return {value: 'Hello Runoob!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function() {
    var value = this.state.value;
    return <div>
            <Content myDataProp = {value}
              updateStateProp = {this.handleChange}></Content>
           </div>;
  }
});
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

四、JSX语法点

添加自定义属性需要使用 data- 前缀
JSX代码的引用：<script type="text/babel" src="helloworld_react.js"></script>
在 JSX 中使用 JavaScript 表达式，表达式写在花括号 {} 中
JSX中不能使用if else语句，但可以使用conditional (三元运算)表达式来替代。

ReactDOM.render(
    <div>
      <h1>{i == 1 ? 'True!' : 'False'}</h1>
    </div>
    ,
    document.getElementById('example')
);

React推荐使用内联样式
- 我们可以使用 camelCase 语法来设置内联样式.
- React 会在指定元素数字后自动添加 px 。

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>……</h1>,
    document.getElementById('example')
);

标签内部注释(需要加大括号)：{/*注释...*/}；
标签外部：/*注释 */
JSX数组：var arr = [<h1>元素1</h1>,<h2>元素2</h2>,];
JSX语法的最外层，只能有一个节点包裹。
组件名不一定是用单标签，也可以是双标签：<HelloMessage /> == <HelloMessage></HelloMessage>
JSX中：onClick等事件，与原生HTML不同，on之后第一个字母是大写的，onClick={this.handleClick}
单标签：return <h3 style={style}>我是一个组件</h3>
标签有包裹： return(<div><h3 style={style}>我是一个组件</h3></div>) return加括号。

candyCat

煦煦