2016年10月21日 星期五

React入門筆記

必須說小編實在不喜歡React的撰寫方式跟風格，畢竟一開始吃了不少鱉。不過既然我學習過我還是簡易做個筆記吧。
Ps.本篇網誌是有段時間前寫的。

有人會問既然小編不喜歡React，但為什麼還是要學呢？一切都是因為……
網路上工作職缺打開，每個都要React & Angular開發經驗者佳，WTF！！ 所以今天你只需要知道，你學會了 =  More Money！！ 如何~有沒有動力了~

一言以蔽之就是：這是一個前端JS框架。OK~這句話似乎又衍生了更多問題，用在什麼地方？好不好用？優點是什麼？跟Angular比較起來差別是？為什麼我要用？

OK，為什麼我要用？大部分情況下，我們都會有專案期限的壓力，通常在這種壓力下，一般人(小編就是一般人啦)就會選用自己最擅長，最有把握的語言(工具)去完成專案，這有什麼優缺點呢? 優點就是專案如期完成的機率大幅提升。缺點呢? 井底之蛙，你會的永遠就是這些，你的速度永遠這麼慢，且你永遠不知道世界有多大，進步有多快。保哥曾在篇網誌上說過，一個工程師的價值在於它是否願意花時間去縮短他的coding時間。簡單說就是提升工作效率啦。一個網站從到尾自己刻的時代已經過去了，什麼都就講究自動化的今天，資料要越乾淨越好，工程師做的事情要越少越好，所以這些前端框架就應運而生。

比起Angular又如何呢？先說小弟我其實是支持Angular啦，特別是A2已經出到RC版的今天，差不多可以進場了，後面再講資料流的時候我會跟大家提到，不過有時專案需要，我們還是要搞懂React這傢伙在搞什麼。


接下來開始進入React的核心
React並不能算是個完整個框架，官方推出React的時候希望落實關注點分離，讓大家可以專注於View的開發，所以充其量React只是MVC中的View而已(有一點點的M啦)，其最重要也是最強大的功能就是Render:宣染 VDOM(虛擬DOM)，我敢保證，你看完說明肯定還是不懂我在說什麼，沒關係就直接進我們第一個範例吧

第一支React
1
2
3
4
5
6
7
8
9
10
11
HTML:
<div id="example"></div>

JSX:
ReactDOM.render(
    <h1>Hello, world!</h1>, //將這個物件，丟到下面這個元件之中
    document.getElementById('example') //丟到我裡面吧
);

render result:
<div id="example"><h1>Hello, world!</h1></div>
Demo
把這些寫在JS代碼中的HTML(VDOM)宣染到畫面上，這就是React最大的賣點，集中撰寫，跟宣染速度快，因為它會透過底層演算，用最小的幅度去修改畫面(不過最近被Vue跟Angular2打臉了)，附上一篇文章


對React來說，很重要的一個觀念，你畫面上看到的所有東西都是元件(components)

Component props
1
2
3
4
5
6
7
8
9
10
11
12
13
var HelloMessage = React.createClass({
    render: function() {
      return <h1>Hello {this.props.name}</h1>; => 所以這邊會輸出Hello John
    }
});

ReactDOM.render(
    <HelloMessage name="John" />, =>設定這物件的name屬性為John
    document.getElementById('example')
);

開嗆時間:
angular 這樣寫就好了 <h1 ng-init="name='John'">Hello {{name}}</h1>


所以其中一個React很大的優勢就是，可以局部重購，因為可以把畫面拆成許多Components，元件中也可以包元件
在JSX中{}內可以正常的寫JS，若是放入array，也會批次被render出來

Array for React
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
      <div>
      {
          names.map(function (name) {
              return <div>Hello, {name}!</div>
          })
      }
      </div>,
      document.getElementById('example')
);
Demo

開嗆時間:
angular 這樣寫就好了 <div ng-repeat="name in names">{{name}}</div>
Demo



Children
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 var Comment = React.createClass({
    render: function() {
        return ( < div className = "comment" >
            < h2 className = "commentAuthor" >
                { this.props.author}
            < /h2>
            {this.props.children} < /div>
        );
    }
});
var CommentList = React.createClass({
    render: function() {
        return (
            < div className = "commentList" >
                < Comment author = "Pete Hunt" > This is one comment < /Comment>
                < Comment author = "Jordan Walke" > This is * another * comment < /Comment >
             < /div>
        );
       }
});
ReactDOM.render(
    <CommentList />,
    document.getElementById('container')
);

/*
這裡可以用children取子節點，如果子節點是很多個物件，那取回來就會是陣列，例如這樣
</Parent>
    <ChildrenA />
    <ChildrenB />
    <ChildrenC />
</Parent>
*/



attr 共用屬性
1
2
3
4
5
6
7
8
9
10
11
var attr = {};  => 共用的屬性，不想重複打可以這樣做
attr['id'] = "a";
attr['name'] = "b";
attr['class'] = "c";

render( 
    <input {...attr} onChange={this.valueChg.bind(this,tr_index,td_index)}/>
) //event如果要綁定參數，必須用bind(this......)的方式呼叫

render result:
<input id="a" name="b" class="c" onChange={this.valueChg.bind(this,tr_index,td_index)}/>



event, refs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.focus();
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput"/> // reference參考，在這可以把它當成向指定idㄧ樣指定物件
        <input type="button" value="Focus the text input" onClick={this.handleClick} /> //onClick觸發handleClick()
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);
Demo
*若是有兩個物件ref 到相同名稱，呼叫時會呼叫到後面的物件。


state
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 var LikeButton = React.createClass({
  getInitialState: function() { =>初始化state
    return {liked: false}; => liked = false;
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked}); => 設定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')
);
Demo



React裡面有個很重要的觀念，state改變，元件就會重新render，所以要想改變畫面上的東西，只有model改變是不夠的，看看以下範例

rerender
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 var Input = React.createClass({
    getInitialState: function() { // 設定初始state
      return {value: 'Hello!'};
    },
    handleChange: function(event) {
        this.setState({value: event.target.value}); // 若不藉此改變state畫面上的數值是不會更動的，除非是改用defaultValue，但如此便無法掌握資料了
    },
    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'));

開嗆時間:
Angular只要這樣寫
<input type="text" ng-model={value} />
<p>{{value}}</p>
Demo
this.props通常是使用在父元素傳值給子元素的情境上this.props 以及 this.state。這兩個屬性有不同的特性與行為，在使用上，官方建議靜態資料使用this.props，動態資料使用this.state。


value defaultValue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var MyComponent = React.createClass({
    getInitialState: function() {
        return {a: "a"};
    },
    handleClick1: function() {
        this.refs.myTextInput1.value="b";
        this.refs.myTextInput2.value="b";
    },
    handleClick2: function() {
        this.setState({a:"b"});
    },
    change1: function(e) {
        alert(e.target.value)
    },
    change2: function(e) {
        alert(e.target.value)
    },
    render: function() {
        return (
            <div>
                <input type="text" ref="myTextInput1" defaultValue={this.state.a} onChange={this.change1}/> 
//直沒有被綁定，可以透過onChange偵聽，也可以透過事件改變，但資料不好掌握
                <br/> // 因為必須是完整的巢狀式迴圈，所以一定要加上反斜線
                <input type="text" ref="myTextInput2" value={this.state.a} onChange={this.change2}/> 
//值被state.a綁定了，也可以透過onChange偵聽，但值不會更改，但可以被事件改變(不觸發onChange)，但這樣它的優勢(資料好掌握)就沒了，一旦資料被rerender，值會再回到state.a
                <br/>
                <input type="button" value="changeA" onClick={this.handleClick1} />
                <br/>
                <input type="button" value="changeState" onClick={this.handleClick2} />
            </div>
        );
    }
});
ReactDOM.render(
    <MyComponent />,
    document.getElementById('container')
);
 Demo
關於value & defaultValue 這有編文章寫得好棒棒 傳送門



className
1
2
3
4
5
6
7
8
9
10
11
 var HelloMessage = React.createClass({
    render: function() {
      var classString = "msg";
      return <div className={classString}>Hello, I'll be there</div>; => 其實就是正常html的class，但class這名詞是React的專有名詞，所以不能直接使用
    }
});

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


其實React也可以做到two-way-data-binding

two-way-data-binding
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 var WithLink = React.createClass({
    /* 載入 React.addons.LinkedStateMixin 中的方法 (this.linkState)*/
    mixins: [React.addons.LinkedStateMixin], //應該是類似擴充方法
    getInitialState: function () {
        return {message: 'Hello!'}
    },
    render: function () {
        /*邏輯處理的地方*/
            return (
                <div>
                <input type='text' valueLink={this.linkState('message')} />
                {this.state.message}
                </div>

        )
    }
});
Demo
但是two-way-data-binding做完可以在render裡面做些簡單的視覺邏輯，但render裡面本來就不適合放資料處理邏輯，所以如果真的要走資料流，也不適合這種方式，這也是這個好用的功能卻一值沒沒無聞的原因。


大致上，元件執行生命週期方法的情形可分為四種
初始化，第一次 render
getDefaultProps()
getInitialState()
componentWillMount()
render()
componentDidMount()
props 發生改變時
componentWillReceiveProps(nextProps)
shouldComponentUpdate(nextProps, nextState)
componentWillUpdate(nextProps, nextState)
render() => 我試不出來
componentDidUpdate(prevProps, prevState)
state 發生改變時
shouldComponentUpdate(nextProps, nextState)
componentWillUpdate(nextProps, nextState)
render()
componentDidUpdate(prevProps, prevState)
元件 unmount 卸載時
componentWillUnmount()
傳送門

來看個簡單範例

生命週期範例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 var Hello = React.createClass({
    getInitialState: function () {
        return {
            opacity: 1.0
        };
    },

    componentDidMount: function () { => 必須在宣染完後才能開始動作
        this.timer = setInterval(function () {
            var opacity = this.state.opacity;
            opacity -= .05;
            if (opacity < 0.1) {
                opacity = 1.0;
            }
            this.setState({
                opacity: opacity => 變更透明度後重新寫入state，react會自動重新宣染該物件
            });
        }.bind(this), 100); => bind(this)在JSX裡面會常常用到，但這不是JSX特有的寫法，而是JS本身的特性，告訴在這個func裡面的this是誰
    },

    render: function () {
        return (
            <div style={{opacity: this.state.opacity}}>
                Hello {this.props.name}
            </div>
        );
    }
});

ReactDOM.render(
    <Hello name="world"/>,
    document.getElementById('example')
);
Demo


Ajax
react本身是無法做到這件事的，必須透過其他框架，例如jQuery。React還有個很大的特色是，跟各家框架都幾乎完美相容，低耦合，甚至它已可以做到類似lazyLoad的效果

var RepoList = React.createClass({
  getInitialState: function() {
    return {
      loading: true,
      error: null,
      data: null
    };
  },

  componentDidMount() {
    this.props.promise.then( => 等待ajax取資料回來
      value => this.setState({loading: false, data: value}),
      error => this.setState({loading: false, error: error}));
  },

  render: function() {
    if (this.state.loading) {// 開始資料分析
      return <span>Loading...</span>;//資料Loading中
    }
    else if (this.state.error !== null) {
      return <span>Error: {this.state.error.message}</span>;
    }
    else {
      var repos = this.state.data.items;
      var repoList = repos.map(function (repo, index) { // map在寫react中也常用到，作用類似forEach把陣列資料處裡回傳(angular 就是 ng-repeat)
        return (
          <li key={index}><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li>
        );
      });
      return (
        <main>
          <h1>Most Popular JavaScript Projects in Github</h1>
          <ol>{repoList}</ol>
        </main>
      );
    }
  }
});

ReactDOM.render(
    <RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,//$.getJSON是jQuery的方法
    document.getElementById('example')
);
Demo
所以網路上許多人也會用React+backbone讓它變成一個完整的MVC框架，讓它開發起來更加靈活


甚至，React還可以寫在server端，當然前提是你要用同樣是JS開發的NodeJS伺服器。這樣可以在server端直接render出畫面，並且在前端繼續開始react的生命週期。
不過感覺有點像php用echo 輸出html 或 .net用lazor輸出html一樣，前後端就又絞在一起了，成為所謂的全端程式，小編是不太喜歡這樣啦
恩.....下面就nodejs跟react混用，沒啥好介紹的。

React in server
 var http = require('http'),
    browserify = require('browserify'),
    literalify = require('literalify'),
    React = require('react'),
    ReactDOMServer = require('react-dom/server');

var App = require('./app');

http.createServer(function(req, res) {
  if (req.url == '/') {
    res.setHeader('Content-Type', 'text/html');
    var props = {
      items: [
        'Item 0',
        'Item 1'
      ]
    };
    var html = ReactDOMServer.renderToStaticMarkup(
      <body>
        <div id="content" dangerouslySetInnerHTML={{__html:
          ReactDOMServer.renderToString(<App items={props.items}/>)
        }} />

        <script dangerouslySetInnerHTML={{__html:
        'var APP_PROPS = ' + JSON.stringify(props) + ';'
        }}/>
        <script src="//fb.me/react-0.14.0.min.js"/>
        <script src="//fb.me/react-dom-0.14.0.min.js"/>
        <script src="/bundle.js"/>
      </body>
    );
    res.end(html);

  } else if (req.url == '/bundle.js') {
    res.setHeader('Content-Type', 'text/javascript');
    browserify()
      .add('./browser.js')
      .transform(literalify.configure({
        'react': 'window.React',
        'react-dom': 'window.ReactDOM',
      }))
      .bundle()
      .pipe(res);
  } else {
    res.statusCode = 404;
    res.end();
  }
}).listen(3000, function(err) {
    if (err) throw err;
    console.log('Listening on 3000...');
})

學到這裡已經可以開始開發小型的React專案了，還可以有簡單的資料流。

=================================================  我是分隔線，休息一下，喝口水 =========================================================


WTF，簡單資料流？？
你應該有發現他的資料流似乎都是父傳子，我想要兄弟相傳，親戚相傳，薪火相傳可以嗎?原則上是可以的，可以透過共同的祖先來資料源與資料處裡。
那問題來了，如果沒有共同的祖先呢？記得React的特性就是東一塊西一塊嗎？而且React當初設計本來就不是為了傳遞資料而設計，所以在資料傳遞上的寫法都會很複雜，所以如果有頻繁的資料傳遞，開發簡單的小程式你就頭大了(說好的React學習曲線平緩呢?)，所以這時候官方就提出了一個設計模式Flux，看清楚我講的不是框架，不是語言，是設計模式!!
那這個Flux又是何方神聖呢？這個.......我們就留到後話再說吧！


張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)