React系列（一）：React入门

时间 2019-11-11

标签 react 系列入门栏目 React 繁體版

原文原文链接

React简介

1.由来

　　React是有Facebook开发出来用于构建前端界面的JS组件库，因为其背后的强大背景，使得这款库在技术开发上彻底没有问题。html

2.React的优点

　　解决大规模项目开发中数据不断变化变得难以操做的问题；前端

　　组件化开发，使得开发更加快速；node

　　单向数据流，有利于找到问题；react

　　虚拟DOM，在React内部有一套diff算法能够快速的计算出总体须要改动的位置，从而作到快速局部刷新；举个栗子：删除一个列表再插入个新表，计算后会比较出不一样而后插进去；webpack

　　JSX的编译方式，将HTML代码和JS混合到一块儿来写，组件结构清晰，数据结构清晰，以后能够经过工具转成JS。web

3.开发方式

　　使用React开发能够像日常开发同样，最后讲JSX转换一下便可，在0.14，React拆分开，因此咱们须要引入三个文件算法

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/JSXTransformer.js"></script>

　　第一个不解释，第二个文件做用是将React结构转换成HTML后插入到指定的DOM节点，第三个为转换文件，将JSX格式转换成JS格式的文件。固然正常状况下还须要引入咱们写的组件（若是你没直接把组件写在HTML里的话= =#）json

　　另一种开发方式就是基于node环境开发，配合webpack，gulp打造一套自动化构建工具，同时在Node里开发咱们还能够配合babel使用ES6语法来编写，这里不细说。redux

基本语法

1.Hello World

　　一切语言的学习开始都是咱们熟知的这个短语~在将React转换为HTML结构的时候须要用到ReactDOM.rendergulp

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

　　插入以前引入的JS和这个JSX文件就能够打开浏览器看一下了~

　　能够看到ReactDOM.render中第一个参数为传入的组件，第二个参数为加入到某个标签里，注意，通常状况下最好不要直接添加到document.body中。

2.组件的编写

　　但这显然离咱们说的组件化还有十万八千里，举个简单的例子，一个简单的上中下结构的网页咱们能够给它拆成三部分（固然也能够更多，这里说最简单的），那么咱们就须要编写3个组件，其中头部和底部都是能够在整站的不少位置复用的。那咱们开始编写咱们的组件：

var Header = React.createClass({
    render: function() {
        return <h1>欢迎来到React学习站</h1>
    }
});

var Main = React.createClass({
    render: function() {
        return (<div className="main_box">
                    <h2>这是一篇关于学习React的网站</h2>
                    <div>我是内容，哈哈哈……</div>
                </div>
    )}
});

var Footer = React.createClass({
    render: function() {
        return (<div>
                    <p>联系电话1333333333</p>
                    <p>QQ：6843521463</p>
                </div>
    )}
});

var Index = React.createClass({
    render: function() {
        return (<div>
                    <Header />
                    <Main />
                    <Footer />
                </div>
    )}
});
        
ReactDOM.render(
        <Index />,
        document.getElementById('div1')
);

　　这里首先咱们使用React.createClass方法定义了3个组件，再在Index组件里将三个组件包在一块儿，最后添加到DOMrender中。

　　其中须要注意的是，在render里的代码结构若是是多层，在最外层必须包裹一层标签，不然会报错。

　　定义的名字必定须要以大写开头。

3.props

　　prop在当前组件里来传递数据，常见的状况是父级传给子级数据，而后子级来调用。

var ListContent = React.createClass({
    render: function(){
        return (
            <div>
                <div>{this.props.json.one}</div>
                <div>{this.props.json.two}</div>
            </div>
        );
    }
});

var All = React.createClass({
    render: function(){
        var json = {
                'one': '这是一个用react写出来的东西',
                'two': 'hello world',
        };
        return (
            <div>
                <ListContent json={json} />
            </div>
        );
    }
});

ReactDOM.render(
    <All />,document.getElementById('box')
);

　　这里咱们在All中定义了一个数据，而后将它传入ListContent 这个组件里，这个时候ListContent 里就有了json的数据，在里面的内容结构中就可使用this.props来调用了，须要注意的是，在标签里插入内容须要用{}来包起来。

4.state

　　React能够算是一个大的状态机，其中的数据改变几乎都来源于状态的改变，state能够用来设置这个状态，当触发某个动做的时候来改变这个state从而更新页面中相关的数据。一个简单的例子：

var ListContent = React.createClass({
    getInitialState: function() {
        return {
            click: true
        };
    },
    ShowName: function() {
        this.setState({
            click: false
        });
        alert('iceblue')
    },
    render: function() {return ( 
            < div >
                < button disabled={this.state.click} onClick = {this.ShowName} > 显示名字 < /button> 
            < /div >
        );
    }
});

ReactDOM.render( < ListContent /> , document.getElementById('box'));

　　在初始环境咱们用getInitialState（固定名字）来设定初始的state值，固然也能够不设定。这里咱们设定了一个状态click，咱们的想法是点击以后按钮变得不可点击。这里咱们定义了一个ShowName（自定义）函数来作两件事，显示名字和改变状态，注意，最好在改变状态的函数中不添加其它做用代码，这里为了省事。这个时候当咱们触发onClick（固定）事件后调用以前定义的函数，经过setState来改变click的值，这时候组件会接收到这种改变并对页面进行改变。

　　基本经过props和state就能够完成一些简单的组件化开发了。

5.map

　　与JQ的map相似，能够遍历子节点而后进行相应的操做，咱们能够利用map来减小大量重复的代码，只须要改变其中填充的数据便可。

var number = ['1', '2', '3', '4'];
ReactDOM.render(
  <div>
    {
        number.map(function(name,key){
            return <div key={key}>此次年终有{name}个月</div>
        })
    }
  </div>,
  document.getElementById('box')
);

6.ref

　　最开始的时候咱们提到了React的最大特色是虚拟DOM，那么也就是说咱们所建立的组件其实并非真实的节点，只有当插入完成后才会变成真实的DOM。当状态改变后，再将算完的结构展示到页面上。若是咱们须要获取真实的DOM节点就须要用到ref属性。

var MyComponent = React.createClass({
        handleClick: function() {
         console.log(this.refs.myTextInput);
        },
        render: function() {
           return (
                   <div>
                       <input type="text" ref="myTextInput" value="随便写点" />
                       <input type="button" value="print" onClick={this.handleClick} />
                   </div>
           )}
});

ReactDOM.render(<MyComponent/>,document.getElementById('box'));
//<input type="text" value="随便写点" data-reactid=".0.0" />

　　这里首先在第一个input中定义ref，以后就能获取到真实节点并进行相应的操做了，其中data-reactid不用管，相似于DOM分层标识，可让React清楚的知道DOM结构并做出快速的计算。

7.生命周期

　　所谓生命周期就是在代码运行的不一样阶段咱们能够进行不一样操做，其中大致有这么几种（固定名字）：

　　getInitialState: 在组件挂载以前调用一次。返回值将会做为 this.state 的初始值。

　　componentWillMount: 服务器端和客户端都只调用一次，在初始化渲染执行以前马上调用。若是在这个方法内调用setState，render() 将会感知到更新后的 state，执行仅一次

　　componentDidMount: 在初始化渲染执行以后马上调用一次，仅客户端有效（服务器端不会调用）。在生命周期中的这个时间点，组件拥有一个 DOM 展示，你能够经过 this.getDOMNode() 来获取相应 DOM 节点。

还有更多的更新组件方法
　　componentWillReceiveProps: 在组件接收到新的 props 的时候调用。在初始化渲染的时候，该方法不会调用

　　shouldComponentUpdate: 在接收到新的 props 或者 state，将要渲染以前调用。该方法在初始化渲染的时候不会调用

　　componentWillUpdate: 在 state 改变的时候执行一些操做

8.事件名　

　　触摸事件：onTouchCancel\onTouchEnd\onTouchMove\onTouchStart

　　键盘事件：onKeyDown\onKeyPress\onKeyUp

　　剪切事件：onCopy\onCut\onPaste

　　表单事件：onChange\onInput\onSubmit

　　焦点事件：onFocus\onBlur

　　UI元素：onScroll(移动设备是手指滚动和PC的鼠标滑动)

　　滚动事件：onWheel(鼠标滚轮)

　　鼠标类型:onClick\onContextMenu(右键)\onDoubleClick\onMouseDown\onMouseEnter\onMouseLeave\onMouseMove\onMouseOut\onMouseOver\onMouseUponDrag\onDrop\onDragEnd\onDragEnter\onDragExit\onDragLeave\onDragOver\onDragStart

9.代码书写的注意事项

　　样式：

　　　　在React中传递数据前面提到过要用{}包起来，同理在标签内传递

　　　　class：className={fontColor}或className="class1"

　　　　style：style={{color:"red"}}或style={newStyle}，其中newStyle为定义的样式集合{corlor:"red",height:.......}

　　逻辑：

　　　　若是想在React中插入代码，能够在代码块外面写，好比

 var MyComponent = React.createClass({
        if(...){do something};
        render: function() {
           return (
                   <div>1</div>
           )}
});

　　今天就写这些，往后可能会出一些关于webpack或者redux结合react的博客，不过博主很懒，不必定啥时候了= =#，最后附上中文API地址：

　　http://reactjs.cn/react/docs/getting-started.html