一起学React | React新手看这篇就够了

点击上方 “前端达人” 可以订阅哦！

最近小编一直在学习React,延误了公众号内容的更新，在此深表歉意。今天在这里主要给大家介绍下我对React的理解，欢迎大家指正与交流。

快速进入开发环境

网上关于介绍如何搭建React+webpack的文章很多，小编也写过一篇《一起学React | 快速搭建React+webpack 开发环境》，感兴趣的同学可以看下，但是作为初学者，小编还是建议快速进入开发环境才是最重要的。通过以下命令可以快速搭建开发环境：

npm install -g create-react-app

create-react-app demo

cd demo

npm start

安装成功后，就会自动启动浏览器，看到如下界面，是不是很简单呢？

虚拟DOM

在React中，render执行的结果得到的并不是真正的DOM节点，结果仅仅是轻量级的JavaScript对象，我们称之为virtual DOM。

虚拟DOM是React的一大亮点，具有batching(批处理)和高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷新”整个页面，由虚拟 DOM来确保只对界面上真正变化的部分进行实际的DOM操作。

React 从来没有说过 “React 比原生操作 DOM 快”。React给我们的保证是，在不需要手动优化的情况下，它依然可以给我们提供过得去的性能。

React掩盖了底层的 DOM 操作，可以用更声明式的方式来描述我们目的，从而让代码更容易维护。

不是框架

相对Angular、Ember等框架，React显得很轻，只能算一个函数库，React专注让用户通过组件构建用户界面。关于服务器数据交互，动画效果的实现都是通过第三方插件实现，所以你能很轻松的把jquery等相关插件集成。

HTML，CSS，JS构成组件

多年来，我们一直将HTML,CSS,JS分开写，放在不同的文件夹里，维护这些文件，大家是什么感受呢？

我们写React组件时，虽然也能分开写，但是小编还是建议大家写在一起，虽然这样写很奇怪，但是习惯后，你会体会到这样写逻辑更加清晰，更加符合组件化的思想。

仅仅是Javascript

不像其他框架，我们不用去学习Typescript或者特有模板语法糖，我们依然能很轻松的使用Javascript完成相关的逻辑，减轻了学习压力，例如以下代码：

<select value={this.state.value} onChange={this.handleChange}>
    {somearray.map(element => <option value={element.value}>
        {element.text}
option>)}
select>

JSX

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

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

1. JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。

2. 它是类型安全的，在编译过程中就能发现错误。

3. 使用 JSX 编写模板更加简单快速。

JSX示例代码入下，看起来类似 HTML：

ReactDOM.render(
<h1>Hello, world!h1>,
document.getElementById('example'));

JavaScript 表达式

ReactDOM.render(
<div> <h1>{1+1}h1> div> ,
document.getElementById('example'));

样式

var myStyle = {fontSize: 100, color: '#FF0000'};
ReactDOM.render(
<h1 style = {myStyle}>前端达人h1>,
document.getElementById('example'));

注释

ReactDOM.render(
<div>  <h1>前端达人h1>
        {/*注释...*/}
div>,
document.getElementById('example'));

数组

var arr =
    [  <h1>菜鸟教程h1>,
<h2>学的不仅是技术，更是梦想！h2>
    ];
ReactDOM.render( <div>{arr}div>,
document.getElementById('example'));

state与props

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

使用 Props

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

使用state

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

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

<script type="text/babel">
    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 ? '喜欢' : '不喜欢';
return (
<p onClick={this.handleClick}>
    你<b>{text}b>我。点我切换状态。
p>
    );
}
});
    ReactDOM.render(
<LikeButton />,
document.getElementById('example')
    );
script>

组件生命周期

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

Mounting：已插入真实 DOM

Updating：正在被重新渲染

Unmounting：已移出真实 DOM

生命周期的方法有：

1. componentWillMount 在渲染前调用,在客户端也在服务端。

2. componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

3. componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。

4. shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 
   可以在你确认不需要更新组件时使用。

5. componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

6. componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

7. componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。

React 表单与事件

在实例中小编设置了输入框 input 值value = {this.state.data}。在输入框值发生变化时我们可以更新 state。我们可以使用 onChange 事件来监听 input 的变化，并修改 state。

var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello Runoob!'};
    },
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} />
<h4>{value}h4>
div>)  }});
ReactDOM.render(  <HelloMessage />,  document.getElementById('example'));

React Refs

React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。

这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。

你可以通过使用 this 来获取当前 React 组件，或使用 ref 来获取组件的引用，实例如下：

var MyComponent = React.createClass({
handleClick: function() {
// 使用原生的 DOM API 获取焦点
        this.refs.myInput.focus();
    },
render: function() {
//  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
    return (
<div>
<input type="text" ref="myInput" />
<input    type="button" value="点我输入框获取焦点"    onClick={this.handleClick}
            />
div>
        );
    }});
ReactDOM.render( <MyComponent />,
document.getElementById('example'));

React 组件 API

关于 React 组件 API 常用的有以下7个：

1. 设置状态：setState

2. 替换状态：replaceState

3. 设置属性：setProps

4. 替换属性：replaceProps

5. 强制更新：forceUpdate

6. 获取DOM节点：findDOMNode

7. 判断组件挂载状态：isMounted

关于API的介绍，限于文章篇，就不在这里介绍了，感兴趣的同学可以查看以下链接：

http://itbilu.com/javascript/react/EkACBdqKe.html

React AJAX

由于React没有提供ajax服务端数据的相关请求，你可以使用第三方库来实现Xhr、Fetch、Superagent、Axios、Jquery。

React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据库可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。

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

以下实例演示了获取 Github 用户最新 gist 共享描述:

var UserGist = React.createClass({  getInitialState: function() {
return {
username: '',
lastGistUrl: ''
    };  },
componentDidMount: function() {
this.serverRequest = $.get(this.props.source, function (result) {
var lastGist = result[0];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
                });
        }.bind(this)); },
componentWillUnmount: function() {
this.serverRequest.abort();
        },
render: function() {
return (
<div> {this.state.username} 用户最新的 Gist 共享地址：
<a href={this.state.lastGistUrl}>
                {this.state.lastGistUrl}a>
div>
        );  }});
ReactDOM.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
    mountNode);

你可能不需要Redux

首先明确一点，Redux 是一个有用的架构，但不是非用不可。事实上，大多数情况，你可以不用它，只用 React 就够了。

曾经有人说过这样一句话。

"如果你不知道是否需要 Redux，那就是不需要它。"

Redux 的创造者 Dan Abramov 又补充了一句。

"只有遇到 React 实在解决不了的问题，你才需要 Redux 。"

简单说，如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。

本文部分内容参考：

http://www.runoob.com/

关于React的入门介绍就介绍到这里，很高兴你能看到这里，理解这些内容后，小编还是建议大家去React官方网站学习和实践，加深对React的理解。

有兴趣的同学，还可已看下小编写的《

一起学react | 亲自动手做一款简单的音乐播放器》亲自实践下。

公众号

前端达人

长按识别左边二维码关注我