React快速入门

作者: 杀破狼real | 来源:发表于2017-03-28 11:32 被阅读39次

react快速入门
快速入门react
React 快速入门
React快速入门
快速入门React
React快速入门
React-Hook快速入门（一）
React入门_上手Javascript的前端交互库
brew不能安装node.js
ReactJS_15 基于webpack手动配置React开发环

Welcome to React!

React是什么？为什么要使用它？

React是Facebook内部的一个JavaScript类库，已于2013年开源，可用于创建Web用户交互界面。它引入了一种新的方式来处理浏览器DOM。那些需要手动更新的DOM、费力地记录每一个状态的日子一去不复返了————这种老旧的方式既不具备扩展性，又很难加入新的功能，就算可以，也是冒着很大的风险。React使用很新颖的方式解决了这些问题。你只需声明式地定义各个时间点的用户界面，而无需关心在数据变化时需要更新哪一部分DOM。在任何时间点，React都能够以最小的DOM修改来更新整个应用程序。

一、HTML模板

使用React的网页源码，结构大致如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React</title>
  <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>

上面代码有两个地方需要注意。首先，最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。

其次，上面代码一共用了三个库： react.js 、 react-dom.js 和 Browser.js ，它们必须首先加载。其中， react.js 是 React 的核心库， react-dom.js 是提供与 DOM 相关的功能， Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

二、ReaceDOM.render()

React.render(
<h1>Hello, World!</h1>,
document.getElementById('example')
);

上面代码将一个 h1 标题，插入 example节点

三、JSX语法

上面的代码，HTML语言直接在JavaScript语言之中，不加任何引号，这就是JSX的语法，它允许HTML与JavaScript的浑写

var names = ['xiaoxin', 'xiaoqiang', 'xiaowanzi'];
React.render(
  <div>
    {
      names.map(function (name) {
        return <div>Hello, {name}!</div>
      })
    }
  </div>,
  document.getElementById('example')
);

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

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

var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome!</h2>,
];

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

四、组件

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

ReactDOM.render(
  <HelloMessage name="xiaoxin" />,
  document.getElementById('example')
);

上面代码中，变量 HelloMessage 就是一个组件类。模板插入 <HelloMessage /> 时，会自动生成 HelloMessage 的一个实例（下文的"组件"都指组件类的实例）。所有组件类都必须有自己的 render 方法，用于输出组件。
注意，组件类的第一个字母必须大写，否则会报错，比如 HelloMessage 不能写成 helloMessage 。另外，组件类只能包含一个顶层标签，否则也会报错。

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

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

组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如 <HelloMessage name="John"> ，就是 HelloMessage 组件加入一个 name 属性，值为 John 。组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取。

五、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>xiaoxin</span>
    <span>xiaoqiang</span>
    <span>xiaowanzi</span>
  </NotesList>,
  document.getElementById('example')
);

上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取。

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

React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object 。

六、PropTypes

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

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

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

上面的 Mytitle 组件有一个 title 属性。PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串。现在，我们设置 title 属性的值是一个数值。

var data = 123;

ReactDOM.render(
  <MyTitle title={data} />,
  document.getElementById('example')
);

这样一来，title属性就通不过验证了。控制台会显示一行警告信息，但是能正常显示，这个地方不是很明白？

七、getDefaultProps

可以为组件添加此函数来设置属性的默认值。不过，这应该只针对那些非必须属性。

var MyTitle = React.createClass({
  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },

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

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

八、获取真实的DOM节点

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （Virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。

但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性

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

上面代码中，组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。

需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName] 属性。

九、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 是会随着用户互动而产生变化的特性。

十、表单

用户在表单填入的内容，属于用户跟组件的互动，所以不能用 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.getElementById('example')
);

上面代码中，文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。同时也可以利用 ref 获取。

十一、组件的生命周期

组件的生命周期

React为每个组件提供了生命周期钩子函数去响应不同的时刻——创建时、存在期及销毁时。

创建时

getDefaultProps
getInitialState
componentWillMount
render
componentDidMount

`getDefaultProps`

对于组件类来说，只会被调用一次。对于那些么有被父辈组件指定props属性的新建实例来说，这个方法返回的对象可用于实例设置默认的props值。

`getInitialState`

对于组件的每个实例来讲，这个方法的调用次数有且只有一次。在这里你将有机会初始化每个实例的state。与getDefaultProps方法不同的是，每个实例创建时该方法都会调用一次。在这个方法里，你已经可以访问到this.props。

`componentWillMount`

该方法在完成首次渲染之前被调用。这也是在render方法调用前可以修改组件state的最后一次机会。

`render`

在这里你会创建一个虚拟DOM，用来表示组件的输出。对于一个组件来说，render是唯一一个必须的方法，并且有特点的规则。rander方法需要满足下面几点：

只能通过this.props和this.state访问数据。

可以返回null、false或者任何React组件。

只能出现一个顶级组件。

必须纯净，意味着不能改变组件的状态或者修改DOM的输出。

render方法返回的结果不是真正的DOM，而是一个虚拟的表现，React随后会把它和真实的DOM作对比，来判断是否有必要做出修改。

`componentDidMount`

在render方法成功调用并且真实的DOM已经被渲染之后，你可以通过this.getDOMNode方法访问它。

当react运行在服务端时，componentDidMount方法不会被调用。

存在期

此时，组件已经渲染好并且用户可以与它进行交互。通常是通过依次鼠标点击、手指点按或者键盘事件来触发一个事件处理器。随着用户改变了组件或者整个应用的state，便会有新的state流入组件树，并且我们将会获得操纵它的机会。

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

`componentWillReceiveProps`

在任意时刻，组件的props都可以通过父辈组件来改变。出现这种情况时，此方法被调用，你也将获得更改props对象以及更新state的机会。

`shouldComponentUpdate`

React非常快。不过你还可以让它更快——通过此方法在组件渲染时进行精确优化。

如果你确定某个组件或者它的子组件不需要渲染新的props或者state，则该方法会返回false

在首次渲染期间或者调用了forceUpdate方法后，这个方法不会被调用

返回false则是在告诉React要跳过调用render方法，以及位于render前后的钩子函数componentWillUpdate和componentDidUpdate。

`componentWillUpdate`

和componentWillMount方法类似，组件会在接收到新的props或者state进行渲染之前调用该方法。注意，你不可以在该方法中更新state或者props，而应该借助componentWillReceiveProps方法在运行中更新state。

`componentDidUpdate`

和componentDidMount方法类似，该方法给了我们更新已经渲染好的DOM的机会。

销毁时

每当React使用完一个组件，这个组件就必须从DOM中卸载随后被销毁。此时，仅有的一个钩子函数会做出响应，完成所有的清理和销毁工作，这很必要。

`componentWillUnmount`

最后，随着一个组件从它的结构中移除，这个组件的生命也走到了尽头。该方法会在组件被移除之前调用，让你有机会做一些清理工作。你在componentDidMount方法中添加的所有任务都需要在该方法中撤销，比如创建的定时器或者添加的事件监听器。

react快速入门
快速入门 React 官方中文文档 – 用于构建用户界面的 JavaScript 库[https://react....
快速入门react
安装react npm install creat-react-app -g 这里直接安装react的一个脚手架，...
React 快速入门
本文采用 es6 语法，完全参考 https://reactjs.org/docs/本文完全参考 React 官方...
React快速入门
Welcome to React! React是什么？为什么要使用它？ React是Facebook内部的一个Ja...
快速入门React
react 使用react需要导入两个模块，react模块中提供了一些供模板使用的方法，react-dom提供了渲...
React快速入门
创建项目 1.npx create-react-app myapp 2.cd myapp 3.npm start ...
React-Hook快速入门（一）
一、React介绍温馨提醒：想要获取更好的观看效果，可以点击查看本篇文章的原文档(React-Hook快速入门（...
React入门_上手Javascript的前端交互库
最近做区块链DAPP小项目，使用React做前端网页，快速介绍一下React入门。其过程如下： 1、使用npm或者...
brew不能安装node.js
想学习React Native，查看快速入门，需要依赖node.js。使用brew install node命令即...
ReactJS_15 基于webpack手动配置React开发环
React提供了create-react-app的快速构建工具, 但面对复杂的项目, 入门级的构建工具, 是远远不...

React快速入门

Welcome to React!

React是什么？为什么要使用它？

一、HTML模板

二、ReaceDOM.render()

三、JSX语法

四、组件

五、this.props.children

六、PropTypes

七、getDefaultProps

八、获取真实的DOM节点

九、this.state

十、表单

十一、组件的生命周期

组件的生命周期

创建时

getDefaultProps

getInitialState

componentWillMount

render

componentDidMount

存在期

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

销毁时

componentWillUnmount

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读