1. บทนำสู่ ReactJS
React เป็นกรอบการพัฒนาส่วนหน้ายอดนิยมเมื่อเร็ว ๆ นี้ React เกิดขึ้นจากโครงการภายในของ Facebook เนื่องจาก บริษัท ไม่พอใจกับกรอบ MVC JavaScript ทั้งหมดในตลาดดังนั้นจึงตัดสินใจเขียนชุดของตัวเองเพื่อตั้งค่าเว็บไซต์ Instagram หลังจากที่ฉันทำมันฉันพบว่าสิ่งต่าง ๆ ชุดนี้มีประโยชน์มากและเปิดในเดือนพฤษภาคม 2013 เนื่องจากแนวคิดการออกแบบของ React นั้นมีเอกลักษณ์มากจึงเป็นการปฏิวัติและนวัตกรรมด้วยประสิทธิภาพที่โดดเด่น แต่ตรรกะรหัสนั้นง่ายมาก ดังนั้นผู้คนจำนวนมากจึงเริ่มให้ความสนใจและใช้มันโดยเชื่อว่าอาจเป็นเครื่องมือหลักสำหรับการพัฒนาเว็บในอนาคต
ที่อยู่เว็บไซต์อย่างเป็นทางการของ ReactJS: http://facebook.github.io/react/
ที่อยู่ GitHub: https://github.com/facebook/react
reactjs ที่อยู่ภาษาจีน: http://reactjs.cn/react/docs/getting-started.html
React คืออะไร?
React เป็นไลบรารี JS ที่พัฒนาโดยโปรแกรมเมอร์ที่โดดเด่นที่ทำงานบน Facebook เพื่อพัฒนาอินเทอร์เฟซการโต้ตอบของผู้ใช้ ซอร์สโค้ดได้รับการดูแลโดยโปรแกรมเมอร์ที่ยอดเยี่ยมจาก Facebook และชุมชนดังนั้นจึงมีทีมงานด้านเทคนิคที่แข็งแกร่งมากเพื่อให้การสนับสนุนด้านเทคนิค React นำสิ่งใหม่ ๆ มากมายเช่นการทำให้เป็นส่วนประกอบ, JSX, เสมือนจริง ฯลฯ DOM เสมือนที่ให้ไว้ทำให้องค์ประกอบการเรนเดอร์ของเราเร็วมากทำให้เราทำงานหนักจากการทำงานหนักของ DOM บ่อยครั้ง ใครก็ตามที่รู้ว่า React รู้ว่ามันมุ่งเน้นไปที่ชั้น V ใน MVC มากขึ้น เมื่อรวมกับสิ่งอื่น ๆ เช่นฟลักซ์คุณสามารถสร้างแอพพลิเคชั่นที่ทรงพลังได้อย่างง่ายดาย
2. คุณสมบัติ ReactJS
1. เสมือนจริง DOM
ผ่านอัลกอริทึม DOM Diff จะมีการอัปเดตชิ้นส่วนที่แตกต่างเท่านั้น
2. ส่วนประกอบ
แบ่งหน้าออกเป็นส่วนประกอบต่าง ๆ รวมถึงโครงสร้างเชิงตรรกะและสไตล์
ส่วนประกอบมีเพียงตรรกะของตัวเองซึ่งสามารถทำนายได้เมื่ออัปเดตส่วนประกอบซึ่งเอื้อต่อการบำรุงรักษา
หน้าแยกส่วนประกอบหลายอย่างและสามารถนำกลับมาใช้ใหม่ได้
3. การไหลของข้อมูลทางเดียว
ข้อมูลถูกส่งผ่านจากส่วนประกอบระดับบนสุดไปยังส่วนประกอบย่อย
สามารถควบคุมข้อมูลได้
3. เริ่มต้นด้วย React เขียนสวัสดีโลก ก่อนอื่นให้เข้าใจว่า JSX คืออะไร
หนึ่งในกลไกหลักของ React คือ Dom เสมือน: องค์ประกอบ DOM เสมือนที่สามารถสร้างได้ในหน่วยความจำ React ใช้ Virtual DOM เพื่อลดการดำเนินการใน DOM จริงและปรับปรุงประสิทธิภาพ เช่นเดียวกับ DOM ดั้งเดิมจริง DOM เสมือนสามารถสร้างผ่าน JavaScript ได้เช่น:
var child1 = react.createelement ('li', null, 'เนื้อหาข้อความแรก'); var child2 = react.createElement ('li', null, 'เนื้อหาข้อความที่สอง'); var root2 = react.createelement ('ul', {classname: child2); react.render (<div> {root2} </div>, document.getElementById ('container5'));การใช้กลไกนี้เราสามารถใช้ JavaScript เพื่อสร้าง TRE DOM อินเตอร์เฟสที่สมบูรณ์เช่นเดียวกับที่เราสามารถใช้ JavaScript เพื่อสร้าง DOMs จริง อย่างไรก็ตามโค้ดดังกล่าวไม่สามารถอ่านได้ดีดังนั้น React ได้ประดิษฐ์ JSX และใช้ไวยากรณ์ HTML ที่คุ้นเคยของเราเพื่อสร้าง DOM เสมือน:
var root = (<ul classname = "my-list"> <li> เนื้อหาข้อความแรก </li> <li> เนื้อหาข้อความที่สอง </li> </ul>); react.render (<div> {root} </div>, document.getElementById ('container6'));4. 5 วิธีในการเริ่มต้นด้วย Hello in React
วิธีที่ 1
<div id = "example1"> </div> <script type = "text/jsx"> react.render (// direct html <h1 classname = "classn1"> 1 hellow โดยตรง html World </h1>, document.getElementById ('ตัวอย่าง 1');วิธีที่ 2
<div id = "ตัวอย่าง 2"> </div> <script type = "text/jsx"> react.render (// สร้างองค์ประกอบโดยตรง react.createElement ('h1', {classname: 'classn2'}, '2 สวัสดีสร้างองค์ประกอบโดยตรง!')วิธีที่ 3
<div id = "example3"> </div> <script type = "text/jsx"> var createel = react.createClass ({render: function () {// return <h1> การสร้างส่วนประกอบ hellow Html World </h1> // กลับมาโดยไม่มีหรือไม่มีตัวกำหนด </h1>);}}); react.render (// สร้างองค์ประกอบ <createlel/>, // หรือสองวงเล็บ <createel> </createel> document.getElementById ('ตัวอย่าง 3')); </script>วิธีที่ 4
<div id = "example4"> </div> <script type = "text/jsx"> var jsxCreateel = react.createClass ({// สร้างเรนเดอร์ในโหมด JSX โดยตรง: ฟังก์ชั่น () {reture องค์ประกอบในเมธอดส่วนประกอบ React.createElement (JsxCreateel, Null), document.getElementById ('example4')); </script>วิธีที่ 5
<div id = "example5"> </div> <script type = "text/jsx"> var hello = react.createClass ({// เทมเพลตสวัสดีเรนเดอร์: ฟังก์ชั่น () {return (<span> {this.props.data} </span>)}}; การเย็บ </span>)}}); react.render (// สร้างองค์ประกอบใน 2 องค์ประกอบเทมเพลต <h1 classname = "classn5"> <hello data = '5 hello'/> <world/> </h1>, document.getElementById ('ตัวอย่าง 5');5. ภาพผลลัพธ์ด้านบน
รหัสที่แนบมา:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> unt document </title> <meta name = "viewport" content = "เริ่มต้น = 1.0, user-scalable = no, maximum-scale = 1, width = อุปกรณ์ width"/> </head> Padding: 0;} body {พื้นหลัง:#333;}#box {พื้นหลัง: url (loveimg/qioa-fxehfqi8208393.jpg) ศูนย์กลางที่ไม่มีการทำซ้ำ; ความกว้าง: 550px; ชายแดน: 8px Solid #FFFF; -webkit-box-sizing: border-box; มาร์จิ้น: 50px auto;}#example1,#example2,#example3,#example4,#example5 {margin: 20px auto; ความกว้าง: 100%; ความเป็นมา: RGBA (255,255,255, .3); Padding: 5px 10px; ขนาดตัวอักษร: 13px; สี:#f1f1f1; -webkit-box-sizing: border-box; } </style> <div id = "box"> <div id = "ตัวอย่าง 1"> </div> <script type = "text/jsx"> react.render (// direct html <h1 classname = "classn1"> 1 hellow direct html โลก </h1> type = "text/jsx"> react.render (// สร้าง element React.createElement โดยตรง ('H1', {className: 'classn2'}, '2 สวัสดีสร้างโลกโดยตรง!'), document.getElementById ('ตัวอย่าง 2')) createel = react.createClass ({render: function () {// return <h1> ส่วนประกอบ hellow สร้าง html World </h1> // กลับมาโดยมีหรือไม่มีวงเล็บ (<h1 classname = 'classn3'> 3 ส่วนประกอบ hellow สร้าง html World </h1>);}}}); <createel> </createel> document.getElementById ('example3')); </script> <div id = "example4"> </div> <script type = "text/jsx"> var jsxCreateel = react.createclass ({// สร้าง render ใน jsx โดยตรง: ฟังก์ชัน สวัสดีสร้างโลกใน JSX โดยตรง! render: function () {return (<span> {this.props.data} </span>)}}); var world = react.createClass ({// เทมเพลตโลกเรนเดอร์: ฟังก์ชั่น () {return (<span> data = '5 hello'/> <world/> </h1>, document.getElementById ('ตัวอย่าง 5')); </script> </div> <script src = "build/react.min.js"> </script> <script src = "build/jsxtransformer.js"นี่คือความรู้เพิ่มเติมสำหรับคุณ:
ตอบสนอง
ปฏิกิริยาตอบสนอง
วัตถุจาวาสคริปต์ที่แสดงถึงองค์ประกอบ HTML วัตถุ JavaScript เหล่านี้ในที่สุดก็ถูกรวบรวมไว้ในองค์ประกอบ HTML ที่สอดคล้องกัน
ส่วนประกอบ
ห่อหุ้มองค์ประกอบปฏิกิริยารวมถึงองค์ประกอบปฏิกิริยาอย่างน้อยหนึ่งอย่าง ส่วนประกอบจะใช้ในการสร้างโมดูล UI ที่นำกลับมาใช้ใหม่ได้เช่นเพจ, การนำทางแถบด้านข้าง ฯลฯ
JSX
JSX เป็นส่วนขยายไวยากรณ์ JavaScript ที่กำหนดโดย React ซึ่งคล้ายกับ XML JSX เป็นตัวเลือกเราสามารถใช้ JavaScript เพื่อเขียนแอปพลิเคชัน React แต่ JSX มีวิธีที่ง่ายกว่าในการเขียนแอปพลิเคชันที่ตอบสนอง
Dom เสมือนจริง
Virtual DOM เป็นวัตถุ JavaScript ที่จำลองแผนผัง DOM React ใช้ Virtual DOM เพื่อแสดงผล UI ในขณะที่ฟังการเปลี่ยนแปลงข้อมูลบน DOM เสมือนจริงและย้ายการเปลี่ยนแปลงเหล่านี้ไปยัง UI โดยอัตโนมัติ