React フレームワークでは何ができるのでしょうか? React フレームワークの詳細な紹介 (完全な使用例付き)-jsチュートリアル-php.cn

React フレームワークでは何ができるのでしょうか? React フレームワークの詳細な紹介 (完全な使用例付き)

寻∝梦

リリース： 2018-09-11 16:45:17

オリジナル

12481 人が閲覧しました

React は、「予測可能な」および「宣言的な」Web ユーザーインターフェイスを構築するための JavaScript フレームワークであり、Facebook が Web アプリケーションをより迅速に開発できるようになりました。記事の内容を見てみましょう

1. 特徴:

1. 任意の時点でアプリケーションがどうあるべきかを記述するだけで、React はその時点での UI インターフェイスの更新を自動的に管理しますデータが変更されたとき。

2. 宣言的データが変更されると、React は概念的には F5 をクリックするのと同じです。実際には、変更の一部のみが更新されます。 React は再利用可能なコンポーネントを構築することを目的としています。実際、React ではコンポーネントを構築するだけです。カプセル化により、コンポーネントコードの再利用、テスト、懸念事項の分離が容易になります。追加に、次のポイントがあります。

従来の Web アプリケーションでは、DOM 操作は通常直接更新されますが、DOM の更新には通常比較的コストがかかることがわかっています。 DOM に対する操作をできる限り減らすために、React は直接 DOM 操作を行う代わりに、DOM を更新するための別の強力な方法を提供します。これは、軽量の仮想 DOM である

Virtual DOM であり、React によって抽象化されたオブジェクトであり、DOM がどのように見えるべきか、どのように表示されるべきかを記述します。実ＤＯＭはこの仮想ＤＯＭを介して更新され、この仮想ＤＯＭが実ＤＯＭの更新を管理する。

なぜこの追加レイヤーの仮想 DOM 操作により高速化できるのでしょうか? これは、React には diff アルゴリズムがあり、仮想 DOM を更新しても実際の DOM がすぐに影響を受けるとは限りません。React はイベントループが終了するまで待機し、この diff アルゴリズムを使用して現在の新しい DOM を比較して最小値を計算します。以前の DOM 表現を使用して実際の DOM を更新する手順。

コンポーネントコンポーネント

DOM ツリー内のノードは要素と呼ばれますが、ここでは Virtual DOM ではコンポーネントと呼ばれます。 Virtual DOM のノードは、コンポーネントで構成される完全な抽象コンポーネントです。注: コンポーネントの存在により DOM diff の計算がより効率的に行われるため、React ではコンポーネントの使用が非常に重要です。

State と Render

React が実際の DOM を表示する方法、コンポーネントをレンダリングする方法、いつレンダリングするか、同期的に更新する方法については、State と Render について簡単に理解する必要があります。 state 属性には、コンポーネントを定義するために必要なデータが含まれています。データが変更されると、再レンダリングするために Render が呼び出されます。ここで、データは提供された setState メソッドを通じてのみ更新できます

公式 Web サイトのデモを見てみましょう。最初:

<!DOCTYPE html>
<html>
<head>
<script src="http://fb.me/react-0.12.1.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
</head>
<body>
<p id="example"></p>
<script type="text/jsx">
React.render(
<h1>Hello, world!</h1>,
document.getElementById(&#39;example&#39;)
);
</script>
</body>
</html>

ログイン後にコピー

非常に簡単です。サーバーからアクセスすると、「Hello, world!」という文字が表示されます。 JSXTransformer.js は、JSX 構文の解析をサポートしています。JSX は、JavaScript で HTML コードを記述することができる構文です。それが気に入らない場合は、React はネイティブ JavaScript メソッドも提供します。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトReact Reference Manual 列にアクセスして学習してください)

別のデモ:

<html>
<head>
<title>Hello React</title>
<script src="http://fb.me/react-0.12.1.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<style>
#content{
width: 800px;
margin: 0 auto;
padding: 5px 10px;
background-color:#eee;
}
.commentBox h1{
background-color: #bbb;
}
.commentList{
border: 1px solid yellow;
padding:10px;
}
.commentList .comment{
border: 1px solid #bbb;
padding-left: 10px;
margin-bottom:10px;
}
.commentList .commentAuthor{
font-size: 20px;
}
.commentForm{
margin-top: 20px;
border: 1px solid red;
padding:10px;
}
.commentForm textarea{
width:100%;
height:50px;
margin:10px 0 10px 2px;
}
</style>
</head>
<body>
<p id="content"></p>
<script type="text/jsx">
var staticData = [
{author: "张飞", text: "我在写一条评论~！"},
{author: "关羽", text: "2货，都知道你在写的是一条评论。。"},
{author: "刘备", text: "哎，咋跟这俩逗逼结拜了！"}
];
var converter = new Showdown.converter();//markdown
/** 组件结构：
<CommentBox>
<CommentList>
<Comment />
</CommentList>
<CommentForm />
</CommentBox>
*/
//评论内容组件
var Comment = React.createClass({
render: function (){
var rawMarkup = converter.makeHtml(this.props.children.toString());
return (
<p className="comment">
<h2 className="commentAuthor">
{this.props.author}:
</h2>
<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
</p>
);
}
});
//评论列表组件
var CommentList = React.createClass({
render: function (){
var commentNodes = this.props.data.map(function (comment){
return (
<Comment author={comment.author}>
{comment.text}
</Comment>
);
});
return (
<p className="commentList">
{commentNodes}
</p>
);
}
});
//评论表单组件
var CommentForm = React.createClass({
handleSubmit: function (e){
e.preventDefault();
var author = this.refs.author.getDOMNode().value.trim();
var text = this.refs.text.getDOMNode().value.trim();
if(!author || !text){
return;
}
this.props.onCommentSubmit({author: author, text: text});
this.refs.author.getDOMNode().value = &#39;&#39;;
this.refs.text.getDOMNode().value = &#39;&#39;;
return;
},
render: function (){
return (
<form className="commentForm" onSubmit={this.handleSubmit}>
<input type="text" placeholder="Your name" ref="author" /><br/>
<textarea type="text" placeholder="Say something..." ref="text" ></textarea><br/>
<input type="submit" value="Post" />
</form>
);
}
});
//评论块组件
var CommentBox = React.createClass({
loadCommentsFromServer: function (){
this.setState({data: staticData});
/*

ログイン後にコピー

便宜上、ここではサーバー側を使用しません。試してみることができます自分でやってみよう

$.ajax({
url: this.props.url + "?_t=" + new Date().valueOf(),
dataType: &#39;json&#39;,
success: function (data){
this.setState({data: data});
}.bind(this),
error: function (xhr, status, err){
console.error(this.props.url, status, err.toString());
}.bind(this)
});
*/
},
handleCommentSubmit: function (comment){
//TODO: submit to the server and refresh the list
var comments = this.state.data;
var newComments = comments.concat([comment]);
//这里也不向后端提交了
staticData = newComments;
this.setState({data: newComments});
},
//初始化 相当于构造函数
getInitialState: function (){
return {data: []};
},
//组件添加的时候运行
componentDidMount: function (){
this.loadCommentsFromServer();
this.interval = setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
//组件删除的时候运行
componentWillUnmount: function() {
clearInterval(this.interval);
},
//调用setState或者父级组件重新渲染不同的props时才会重新调用
render: function (){
return (
<p className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data}/>
<CommentForm onCommentSubmit={this.handleCommentSubmit} />
</p>
);
}
});
//当前目录需要有comments.json文件
//这里定义属性，如url、pollInterval，包含在props属性中
React.render(
<CommentBox url="comments.json" pollInterval="2000" />,
document.getElementById("content")
);
</script>
</body>
</html>

ログイン後にコピー

効果:

この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイト

React ユーザーマニュアル

列にアクセスして学習してください)。以下のメッセージ。

以上がReact フレームワークでは何ができるのでしょうか? React フレームワークの詳細な紹介 (完全な使用例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。