Component (คอมโพแนนท์) State (เสตท) และ Props (พร็อพ) คอนเซ็ปของ React (รีแอกซ์)

หมวดสำหรับแบ่งบันความ รู้ต่างๆ จะมีหมวดย่อยๆ ในหมวดนี้ เช่น php, SQL, XML, CSS

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Wallapa
PHP Hero Member
PHP Hero Member
โพสต์: 163
ลงทะเบียนเมื่อ: 30/10/2017 10:22 am

Component (คอมโพแนนท์) State (เสตท) และ Props (พร็อพ) คอนเซ็ปของ React (รีแอกซ์)

โพสต์โดย Wallapa » 31/10/2017 2:26 pm


    React elements คือ Javascrip Object ธรรมดาๆ ที่สร้างมาเหมือนว่ามันคือ HTML Elements และ Element พวกนี้มันไม่ได้มีหน้าที่ทำงานบนบราวเซอร์แต่แค่เป็นตัวแทนของ HTML Tags เช่น <h1>..</h1>, <div>...</div>
    Components คือ React elements ที่เราสร้างขึ้นมานั่นเองซึ่งจริงๆ แล้วมันคือ UI ที่ประกอบด้วย (HTML tags) กับฟังก์ชัน (events ต่างๆ)
    JSX คือ JavaScript ที่เอาไปร่วมกับ XML ให้สามารถเขียน Tags ลงไปใน JavaScript มีนามสกุลเป็น .jsx
    Virtual DOM คือ สิ่งรวมเอา JavaScript Object (React elements, Components) มาทำงานด้วยกัน

    Component

    โค้ด: เลือกทั้งหมด

    class Hello extends Component {
      render() {
        return (
        <div>Hello, World!</div>
        )
      }
    }

    React จะแยก ส่วนต่างๆ ออกเป็นส่วนๆ เรียกว่า Component แล้วเอามารวมกันตอนที่ระบบ render เช่นแยก Header, Footer

    State

    โค้ด: เลือกทั้งหมด

    class Hello extends React.Component {
      constructor(props) {
        super(props);
        this.state = {clicked: props.clicked};
      }
      isClicked() {
        this.setState({clicked: !this.state.clicked});
      }
      render() {
        var buttonClass = this.state.clicked ? 'red' : ''
       
        return (
          <div className={buttonClass}>Hello {this.props.name}
            <button onClick={this.isClicked.bind(this)}>
              click me!!!
            </button>
          </div>
        );
      }
    }
    Hello.propTypes = { clicked: React.PropTypes.bool };
    Hello.defaultProps = { clicked: false };

    ตัวนี้จะเป็นการส่งค่า เก็บค่า เปลี่ยนแปลงค่า การทำงานมีการเปลี่ยนแปลงอะไร state ก็จะเป็นตัวทำหน้าที่ต่อจากนั่นระบบจึงทำ patch UI การเรียกค่าจะผ่าน this.state.[Param]; ส่วนการกำหนดค่าจะเรียกผ่าน this.setstate(***);

    Props

    โค้ด: เลือกทั้งหมด

    var Hello = React.createClass({
      render: function() {
        return <div>Hello {this.props.name}</div>;
      }
    });
     
    ReactDOM.render(
      <Hello name='Algoritmtut' />,
      document.getElementById('container')
    );

    ตัวนี้เป็นแค่การส่งค่าบางอย่างตอนที่ระบบ render UI เข้าไปใน UI แต่ละ Component โดยจะเรียกค่าผ่าน this.prop.[Param] แล้วนำไปใช้งานต่อ แบบตัวอย่างบน render ส่ง name แล้วเอาไปใช้ในของ Component

    อ้างอิง : https://www.algorithmtut.com/, https://reactjs.org/


  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 4 และ บุคคลทั่วไป 0 ท่าน