react学习笔记

Posted 2020-11-04 benmumu

1. 参考http://www.ruanyifeng.com/blog/2015/03/react.html，阮一峰日志 https://reactjs.org/docs/introducing-jsx.html
2. 起源于Facebook。Js中MVC框架
3. react独有的JSX语，凡是使用 JSX 的地方，都要加上 type=”text/babel”。核心库为react.js，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 javascript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。 JSX produces react ‘elements’。
4. 例子

function formatName(user) {
    return user.firstName + ‘‘ + user.lastName;
}
const user = {
    firstName: ‘Harper‘,
    lastName: ‘Perez‘
};

const element = (
    <h1>
        Hello, {formatName(user)}!
    </h1>
);
ReactDOM.render(
    element,
    documnet.getElemnetById(‘root‘)
)

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

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

上面代码的arr变量是一个数组，结果 JSX 会把它的所有成员，添加到模板 
6. 组件。react允许将代码封装成组件，然后像插入普通html标签一样，在网页中插入这个组件。React.createClass方法就用于生成一个组件类

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

添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。 
7. this.props.children。表示组件的所有子节点。 
this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 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
);

8 . PropTypes。组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求。

var MyTitle = React.createClass({
  propTypes: function () {
    return {
      title : ‘Hello World‘
    };
  },
  render: function() {
     return <h1> {this.props.title} </h1>;
  }
});
ReactDOM.render(
  <MyTitle />,
  document.body
);

9 . 获取真是的DOM节点 
组件并不是真是的DOM节点，而是存在于内存之中的一种数据结构，叫做虚拟DOM（virtual DOM）。只有当它插入文档以后，才会变成真实的DOM。根据React设计，所有的DOM变动，都先在虚拟DOM上发生，然后再将实际发生变动的部分，反映在真实的DOM上，这种算法叫做DOM diff，它可以极大提高网页的性能表现。 
但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性。 
10 . this.state。组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI。

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

上面代码是一个 LikeButton 组件，它的 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。 
11. 表单 
用户在表单填入的内容，属于用户跟组件的互动，所以不能用 this.props 读取。

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

12 . 组件的生命周期 
三个状态：Mounting：已插入真实DOM 
Updating：正在被重新渲染 
Unmounting: 已移出真实DOM 
13. Ajax 
组件的数据来源，通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI

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

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