React学习笔记

React学习笔记

JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中

ReactDOM.render(    <div>      <h1>{1+1}</h1>    </div>    ,    document.getElementById('example'));

在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代

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

要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名
myDieElement

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

要渲染 React 组件，只需创建一个大写字母开头的本地变量
MyComponent

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

在标签内部的注释需要花括号

ReactDOM.render(    <h1>孙朝阳 {/*注释*/}</h1>,    document.getElementById('example'));

代码中嵌套多个 HTML 标签，需要使用一个标签元素包裹它

ReactDOM.render(  <section>    <h1>这是正确的例子</h1>    <span>假设这里是标题下面的内容</span>  </section>,  document.getElementById("example"));

封装一个输出 “Hello World！” 的组件

var HelloMessage = React.createClass({  render: function() {    return <h1>Hello World！</h1>;  }});ReactDOM.render(  <HelloMessage />,  document.getElementById('example'));

向组件传递参数，可以使用 this.props 对象

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

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）

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 ? '喜欢' : '不喜欢';          return (            <p onClick={this.handleClick}>              你<b>{text}</b>我。点我切换状态。            </p>          );        }      });      ReactDOM.render(        <LikeButton />,        document.getElementById('example')      );

通过 getDefaultProps() 方法为 props 设置默认值

var HelloMessage = React.createClass({  getDefaultProps: function() {    return {      name: 'Runoob'    };  },  render: function() {    return <h1>Hello {this.props.name}</h1>;  }});ReactDOM.render(  <HelloMessage />,  document.getElementById('example'));

React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效

var title = "菜鸟教程";// var title = 123;var MyTitle = React.createClass({  propTypes: {    title: React.PropTypes.string.isRequired,  },  render: function() {     return <h1> {this.props.title} </h1>;   }});ReactDOM.render(    <MyTitle title={title} />,    document.getElementById('example'));

React 组件 API

设置状态:setState

setState(object nextState[, function callback])

var Counter = React.createClass({  getInitialState: function () {    return { clickCount: 0 };  },  handleClick: function () {    this.setState(function(state) {      return {clickCount: state.clickCount + 1};    });  },  render: function () {    return (<h2 onClick={this.handleClick}>点我！点击次数为: {this.state.clickCount}</h2>);  }});ReactDOM.render(  <Counter />,  document.getElementById('message'));

替换状态：replaceState

replaceState(object nextState[, function callback])

设置属性：setProps

setProps(object nextProps[, function callback])

替换属性：replaceProps

replaceProps(object nextProps[, function callback])

强制更新：forceUpdate

forceUpdate([function callback])

React 组件生命周期

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

生命周期的方法有：

• componentWillMount 在渲染前调用,在客户端也在服务端。

• componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

• componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。

• shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。

• componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

• componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

• componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。

React Refs

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