ZhangYang's Blog

React

发表于 | 分类于

安装

打开bash,输入git clone git@github.com:ruanyf/react-demos.git

Demo 子目录，每个目录都有一个 index.html 文件，在浏览器打开这个文件，就能立刻看到效

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

HTML模板

react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<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>

实际上线的时候，应该将将 JSX 语法转为 JavaScript 语法放到服务器完成

将 src 子目录的 js 文件进行语法转换，转码后的文件全部放在 build 子目录

1
babel src --out-dir build

ReactDOM.render()

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点

1
2
3
4
5
// 将一个 h1 标题，插入 example 节点
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

image

JSX语法

JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析

1
2
3
4
5
6
7
8
9
10
11
12
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
  <div>
  {
    names.map(function (name) {
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById('example')
);

image

JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员

1
2
3
4
5
6
7
8
var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

image

组件

React 允许将代码封装成组件，然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类

1
2
3
4
5
6
7
8
9
10
11
12
13
 // 所有组件类都必须有自己的 render 方法，用于输出组件
 // <HelloMessage name="John"> ，就是 HelloMessage 组件加入一个 name 属性，值为 John
 // 组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取
 var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});
ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById('example')
);

代码会报错,因为HelloMessage组件包含了两个顶层标签：h1和p

1
2
3
4
5
6
7
8
9
 var HelloMessage = React.createClass({
  render: function() {
    return <h1>
      Hello {this.props.name}
    </h1><p>
      some text
    </p>;
  }
});

image

class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字

this.props.children

this.props.children属性表示组件的所有子节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取
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
);

image

this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined

如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array

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

PropTypes

组件的属性可以接受任意值，字符串、对象、函数等等都可以

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// title 属性是必须的，而且它的值必须是字符串,如下设置 title 属性的值是一个数值
var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },
  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});
var data = 123;
ReactDOM.render(
  <MyTitle title={data} />,
  document.body
);
// title属性就通不过验证了。控制台会显示一行错误信息
Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.

getDefaultProps 方法可以用来设置组件属性的默认值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 输出"Hello World"
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的节点，这时就要用到ref属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入
//文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点
//this.refs.[refName] 属性获取的是真实 DOM ，必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错
//通过为组件指定Click事件的回调函数，确保了只有等到真实DOM发生Click事件之后，才会读取this.refs.[refName]属性
//React 组件支持很多事件，除了 Click事件以外，还有 KeyDown 、Copy、Scroll
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')
);

this.state

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//LikeButton组件，它的getInitialState方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state属性读取
//当用户点击组件，导致状态变化，this.setState方法就修改状态值，每次修改以后，自动调用this.render方法，再次渲染组件
//
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} this. Click to toggle.
      </p>
    );
  }
});
ReactDOM.render(
  <LikeButton />,
  document.getElementById('example')
);

this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性

表单

用户在表单填入的内容，属于用户跟组件的互动，所以不能用 this.props 读取

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange事件的回调函数，通过event.target.value读取用户输入的值
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.body);

组件的生命周期

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

  • 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)：组件判断是否重新渲染时调用

这些方法的详细说明，可以参考官方文档。下面是一个例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// hello组件加载以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染
//  React 组件样式是一个对象，所以第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象
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 (
      <div style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </div>
    );
  }
});
ReactDOM.render(
  <Hello name="world"/>,
  document.body
);

Ajax

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

jQuery 完成 Ajax 请求，这是为了便于说明。React 本身没有任何依赖，完全可以不用jQuery，而使用其他库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var UserGist = React.createClass({
  getInitialState: function() {
    return {
      username: '',
      lastGistUrl: ''
    };
  },
  componentDidMount: function() {
    $.get(this.props.source, function(result) {
      var lastGist = result[0];
      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="https://api.github.com/users/octocat/gists" />,
  document.body
);

把一个Promise对象传入组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
//Github的API抓取数据，然后将Promise对象作为属性，传给RepoList组件
//Promise对象正在抓取数据（pending状态），组件显示"正在加载"
//如果Promise对象报错（rejected状态），组件显示报错信息
//如果Promise对象抓取数据成功（fulfilled状态），组件显示获取的数据
var RepoList = React.createClass({
  getInitialState: function() {
    return {
      loading: true,
      error: null,
      data: null
    };
  },
  componentDidMount() {
    this.props.promise.then(
      value => this.setState({loading: false, data: value}),
      error => this.setState({loading: false, error: error}));
  },
  render: function() {
    if (this.state.loading) {
      return <span>Loading...</span>;
    }
    else if (this.state.error !== null) {
      return <span>Error: {this.state.error.message}</span>;
    }
    else {
      var repos = this.state.data.items;
      var repoList = repos.map(function (repo, index) {
        return (
          <li key={index}><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li>
        );
      });
      return (
        <main>
          <h1>Most Popular JavaScript Projects in Github</h1>
          <ol>{repoList}</ol>
        </main>
      );
    }
  }
});
ReactDOM.render(
  <RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,
  document.getElementById('example')
);