React学习笔记一：入门知识概览

时间 2019-11-24

标签 react 学习笔记入门知识概览栏目 React 繁體版

原文原文链接

一：安装reactcss

1:直接下载react源码包，把须要用到的js文件引入本身的页面便可。html

2:BootCDN 的 React CDN 库：前端

在页面代码中导入便可：node

 <head>
    <meta charset="UTF-8" />
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>

二：JSXreact

React 使用 JSX 来替代常规的 JavaScript。数组

咱们能够在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。babel

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

React 推荐使用内联样式：即先定义一个样式变量，而后在指定元素样式时 style=styleVar便可。dom

注释：{/* 注释 */}异步

JSX容许在html标签之间插入数组，而且会自动遍历数组。

JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签：

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

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

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

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

三：组件

1）建立自定义组件

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello World！</h1>;
  }
});

React.createClass 方法用于生成一个组件类 HelloMessage。

原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头。

2）使用组件

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

<HelloMessage /> 建立组件类实例。

若是咱们须要向组件传递参数，可使用 this.props 对象：

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

在添加属性时， class 属性须要写成 className ，for 属性须要写成 htmlFor ，这是由于 class 和 for 是 JavaScript 的保留字。

3）组件复合

var WebSite = React.createClass({
  render: function() {
    return (
      <div>
        <Name name={this.props.name} /> //Name是自定义的组件
        <Link site={this.props.site} />  //Link是自定义的组件
      </div>
    );
  }
});

四：状态

React 把组件当作是一个状态机。经过与用户的交互，实现不一样状态，而后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，而后根据新的 state 从新渲染用户界面（不须要操做 DOM）。

每次修改之后，自动调用 this.render 方法，再次渲染组件。

五：参数

state 和 props 主要的区别在于 props 是不可变的，而 state 能够根据与用户交互来改变。

因此有些容器组件须要定义 state 来更新和修改数据，而子组件只能经过 props 来传递数据。

你能够经过 getDefaultProps() 方法为组件 props 设置默认值：

getDefaultProps: function() {
    return {
      name: 'Runoob'
    };
  }

咱们能够在父组件中设置 state，并经过在子组件上使用 props 将其传递到子组件上。

var WebSite = React.createClass({
  getInitialState: function() {／／设置默认值
    return {
      name: "菜鸟教程",
      site: "http://www.runoob.com"
    };
  },
 
  render: function() {
    return (
      <div>
        <Name name={this.state.name} /> //建立子组件实例，把数据传进去
        <Link site={this.state.site} />
      </div>
    );
  }
});
 
var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>//使用props获取父组件传进来的参数
    );
  }
});
 
var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});

Props 验证：

使用 propTypes，它能够保证咱们的应用组件被正确使用，React.PropTypes 提供不少验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据（好比：类型不对）时，JavaScript 控制台会抛出警告，前端也不会产生输出。

var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },

验证器有：

 propTypes: {
    // 能够声明 prop 为指定的 JS 基本数据类型，默认状况，这些数据是可选的
    optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,
 
    // 能够被渲染的对象 numbers, strings, elements 或 array
    optionalNode: React.PropTypes.node,
 
    //  React 元素
    optionalElement: React.PropTypes.element,
 
    // 用 JS 的 instanceof 操做符声明 prop 为类的实例。
    optionalMessage: React.PropTypes.instanceOf(Message),
 
    // 用 enum 来限制 prop 只接受指定的值。
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
 
    // 能够是多个对象类型中的一个
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),
 
    // 指定类型组成的数组
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
 
    // 指定类型的属性构成的对象
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
 
    // 特定 shape 参数的对象
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),
 
    // 任意类型加上 `isRequired` 来使 prop 不可空。
    requiredFunc: React.PropTypes.func.isRequired,
 
    // 不可空的任意类型
    requiredAny: React.PropTypes.any.isRequired,
 
    // 自定义验证器。若是验证失败须要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常，由于这样 `oneOfType` 会失效。
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  },

六：组件API

设置状态：setState：

不能在组件内部经过this.state修改状态，由于该状态会在调用setState()后被替换。

setState()并不会当即改变this.state，而是建立一个即将处理的state。setState()并不必定是同步的，为了提高性能React会批量执行state和DOM渲染。

setState()老是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。

替换状态：replaceState
设置属性：setProps

props至关于组件的数据流，它老是会从父组件向下传递至全部的子组件中。当和一个外部的JavaScript应用集成时，咱们可能会须要向组件传递数据或通知React.render()组件须要从新渲染，可使用setProps()。

替换属性：replaceProps
强制更新：forceUpdate
获取DOM节点：findDOMNode
判断组件挂载状态：isMounted

可使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错。

七：组件生命周期

组件的生命周期可分红三个状态：

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 组件的数据能够经过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据后，能够将数据存储在 state 中，再用 this.setState 方法从新渲染 UI。

当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。