react笔记 – 随身笔记

在pc端中使用react，在移动端使用react native。

1，环境部署

 <script src="../build/react.js"></script>
 <script src="../build/react-dom.js"></script> //react想要跟dom交互就靠它
 <script src="../build/browser.min.js"></script>//将JSX语法(就是js和html混搭语言)转为 JavaScript 语法

2，ReactDOM.render()

将虚拟dom插入页面中，成为真实dom显示出来

<body>
 <div id="example"></div>
 <script type="text/babel"> //这里要注意类型，说明是用了jsx语法
  ReactDOM.render(
   <h1>Hello, world!</h1>,
   document.getElementById('example')
  );
 </script>
</body>

3，JSX 语法

HTML 语言直接写在 JavaScript 语言之中，混合就是jsx

为了浏览器能识别所以要加载browser.min.js，都转化为js

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
  <div>
  {
    names.map(function (name) {
       return <div>Hello, {name}!</div>
    })
  }
 </div>,
 document.getElementById('example')
);

数组里面直接加入html不需要单引号和加号串联：

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

4、组件React.createClass({})

var HelloMessage = React.createClass({   //这个称为组件，组件名称首字母必须大写
 render: function() {
   return <h1>Hello {this.props.name}</h1>; //顶级层只能有一个父容器，this.props用来获取用户传来的参数
 }
});

ReactDOM.render(
 <HelloMessage name="John" />,  //可以看成是调用一个fn函数,HelloMessage("John")，注意class和for是js关键词，如果想要自定义这样的名称只能写成className和htmlFor
 document.getElementById('example')
);

5，this.props

用来获取用户传来的参数或者顶级容器的所有子节点，（一般声明了就不会改变）

this.props.自定义属性 //获取用户传来的参数

var HelloMessage = React.createClass({ 
 render: function() {
  return <h1>Hello {this.props.name}</h1>; //获取name的值即是John"
 }
});


ReactDOM.render(
 <HelloMessage name="John" />  //name="John"是用户自定义的参数
 document.getElementById('example')
);

this.props.children //获取顶级容器的所以子节点

下面例子使用this.props.children就是获取到所有的span，因为它们是顶级容器的子节点

ReactDOM.render(
 <NotesList>
  <span>hello</span>
  <span>world</span>
 </NotesList>,
 document.body
);

这里需要注意， this.props.children 的值有三种可能：
如果当前组件没有子节点，它就是 undefined ;
如果有一个子节点，数据类型是 object ；
如果有多个子节点，数据类型就是 array 。
所以，处理 this.props.children 的时候要小心。

React 提供一个工具方法 React.Children 来处理 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
);

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

6，PropTypes

用来判断用户传来的参数是否符合要求

var MyTitle = React.createClass({
 propTypes: {
   title: React.PropTypes.string.isRequired, //title值必须是字符串
 },

 render: function() {
   return <h1> {this.props.title} </h1>;
 }
});


var data = 123;
ReactDOM.render(
  <MyTitle title={data} />,  //title的值必须是字符串，如果别的类型值就会报错
  document.body
);

7，this.refs react获取DOM节点

var MyComponent = React.createClass({
 handleClick: function() {
    this.refs.myTextInput.focus();
 },
 render: function() {
   return (
     <div>
       <input type="text" ref="myTextInput" /> //这里的ref就相当于id,这样react能方便获取
       <input type="button" value="Focus the text input" onClick={this.handleClick} />
     </div>
   );
 }
});

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

8，this.state

动态值、状态值，会随着用户跟界面交互随时改变

var LikeButton = React.createClass({
 getInitialState: function() { //初始化动态值在此函数中进行
   return {liked: false}; //动态值都声明在这里面，获取里面的值使用：this.state.xxx
 },
 handleClick: function(event) {
   this.setState({liked: !this.state.liked}); //修改动态值使用this.setState({})
 },
 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')
);

9，事件

react也有自己的事件方法，例如 click、hover等等，下面看一个例子：

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

1,{}:在jsx语法中传变量到虚拟html要用到
2,event.target:就相当于$(this)
3,on+事件名:想给哪个虚拟dom绑定事件就加上on+事件名

10，css样式

render: function () {
 return (
   <div style={{opacity: 0.5,marginLeft:10px}}>
     Hello {this.props.name}
   </div>
 );
}

11，ajax (使用了jquery)

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

 componentDidMount: function() {
    $.get(this.props.source, function(result) { //这里使用的是jquery的$.get
      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
);

http://www.ruanyifeng.com/blog/2015/03/react.html

学习react必须要了解生命周期，不然很难学习下去：《react native生命周期》