ReactJS基礎知識

1.JSX語法

• 可以在js代碼中插入html片段，是React自創的一種語法
• JSX語法會被Babel等轉碼工具進行轉碼，成為正常的js代碼再執行
• JSX中所有的html標簽必須是閉合的
• 在JSX中，只能存在一個根標簽
• 如果在html標簽中插入js代碼，需通過{}插入

const d1 = <div>hello React.js</div> //true const d2 = <div>hello world //false export default () => {const t = () => "I love China !";return (<div>hello,{t()}</div>); } //結果：hello,I love China !

2.組件

• 組件是React中最核心的概念，一個網頁由若干個組件組成

2.1定義組件

• 定義組件

import React from 'react'; class HelloWorld extends React.Component{render() {return (<div>It's my first ReactJS component.</div>);} } export default HelloWorld;

• 自定義組件相互調用

import React from "react"; import HelloWorld from "./HelloWorld"; class Show extends React.Component{render() {return (<HelloWorld></HelloWorld>);} } export default Show;

• 組件參數傳遞：通過屬性和標簽包裹的內容傳遞
• 獲取屬性：this.props.name
• 獲取標簽內容：this.props.children

import React from "react"; import HelloWorld from "./HelloWorld"; class Show extends React.Component{render() {return (<HelloWorld name = "cyl">小鹿</HelloWorld>);} }import React from 'react';class HelloWorld extends React.Component{render() {return (<div>It's my first React component.name = {this.props.name},內容= {this.props.children}</div>);} } export default HelloWorld;

2.2組件狀態

• 每個組件都有自己的狀態，其保存在this.state中
• 當狀態發生改變時，React框架會自動調用render()方法，重新渲染頁面
• this.state值的設置要在constructor parameter中完成，不能直接進行修改

import React from "react"; class List extends React.Component{constructor(props) {super(props);this.state = {dataList : [1,3],maxNum : 3}}render() {return(<div><ul>{ //循環操作this.state.dataList.map((value,index)=> {return <li key={index}>{value}</li>})}</ul>//點擊按鈕，執行自定義函數更新數據<button onClick={() => {let maxNum = this.state.maxNum + 2;let newArr = [...this.state.dataList,maxNum];this.setState({dataList: newArr,maxNum: maxNum});}}>click me</button></div>);} } export default List;

• 在組件運行的不同階段，ReactJS為這些階段提供了鉤子(回調)函數，允許開發者自定義每個階段的函數

總結

以上是生活随笔為你收集整理的ReactJS快速入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。