1.react的基礎知識
阿新 • • 發佈：2022-05-04
React 的基礎之：JSX 語法
react 使用 JSX 語法，js 程式碼中可以寫 HTML 程式碼。
let myTitle = <h1>Hello, World!</h1>;JSX 語法解釋：
(1) JSX 語法的最外層，只能有一個節點：
//錯誤
let myTitle = <p>Hello</p><p>World</p>(2) JSX 語法中可以插入 JavaScript 程式碼，使用大括號。
let myTitle = <p>{'Hello' + 'World'}</p>
Babel 轉碼器
js 引擎（包括瀏覽器和 Node）都不認識 JSX，需要首先使用 Babel 轉碼，然後才能夠執行。
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel">
// ** 這裡添寫程式碼! **
</script>React 需要載入兩個庫：React 和 React-DOM，前者是 React 的核心庫，後者是 React 的 DOM 適配庫。
Babel 用來在瀏覽器轉換JSX語法，如果伺服器已經轉好了，瀏覽器就不需要載入這個庫。
React基礎之React元件
React 允許使用者定義自己的元件，插入網頁。
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>菜鳥教程 React 例項</title> <script src="https://cdn.bootcss.com/react/15.4.2/react.js"></script> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> class MyComponent extends React.Component { render() { return <h1>Hello world</h1>; } }; ReactDOM.render( <MyComponent/>, document.getElementById('example') )； </script> </body> </html>
結果：
React元件的語法解釋
- class MyComponent extends React.Component 是 ES 6語法，表示自定義一個 MyComponent 類，該類繼承了積累 React.Component 的所有屬性和方法。
- React 規定，自定義元件的開頭字母必須大寫，比如 MyComponent 不能寫為 myComponent，以便於與內建的原生類相區分。
- 每個元件都必須有 render 方法，定義輸出的樣式。
- <MyComponent/> 表示生產一個元件類的例項，每一個例項一定要有閉合標籤，寫成 <MyComponent></MyComponent> 也可以。
元件的引數
元件可以從外部傳入引數，內部使用this.props獲取引數。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 例項</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class MyComponent extends React.Component {
render() {
return <h1 style={{color: this.props.color}}>
{this.props.name}
</h1>;
}
};
ReactDOM.render(
<MyComponent name='Hello world' color='red' />,
document.getElementById('example')
)；
</script>
</body>
</html> 結果：
語法解釋
- 元件內部通過this.props物件獲取引數。
元件的狀態
元件往往會有內部狀態，使用this.state表示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 例項</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class MyComponent extends React.Component {
constructor(... args) {
super(...args);
this.state = {
test: 'Hello State',
isClicked: false
};
}
handleClick() {
let isClicked = !this.state.isClicked;
this.setState({
isClicked : isClicked,
text: isClicked ? 'Hello State' : Date();
});
}
render() {
return <h1 onClick={this.handleClick.bind(this)}>
clikc to : {this.state.text}
</h1>
}
};
ReactDOM.render(
<MyComponent/>,
document.getElementById('example')
)；
</script>
</body>
</html> 語法解釋
class MyTitle extends React.Component {
constructor(...args) {
super(...args);
this.state = {
name: '訪問者'
}
}
}constructor是元件的建構函式，會在建立例項時自動呼叫。...args表示元件引數，super(...args)是ES6規定的手法。this.state物件用來存放內部狀態，這裡是定義初始狀態。
<div>
<input type="text" onChanges={this.handleChange.bind(this)}>
<p>你好，{this.state.name}</p>
</div>this.state.name表示讀取this.state的name屬性。每當輸入框有變動的時候，就會自動呼叫onChange指定的監聽函式，這裡是this.handleChange, .bind(this)表示該方法內部的this,綁定當前元件。
handleChange(e) {
let name = e.target.value;
this.setState({
name: name
});
}this.setState方法用來重置this.state，每次呼叫這個方法，就會引發元件的重新渲染。
元件的生命週期
React為元件的不同生命週期，提供了近十個鉤子方法。
鉤子方法：是對於抽象方法或者介面的一個空實現。
現實中的一應用，想要實現某個介面中的一個方法（該介面中有多個方法），先用一個抽象類實現這個介面，然後用abstract修飾想要實現的方法，然後其他方法都使用空實現，然後子類繼承抽象類即可。這裡的空實現方法就是鉤子方法。
- componentWillMount()：元件載入前呼叫。
- componentDidMount()：元件載入後呼叫。
- componentWillUpdate()：元件更新前呼叫。
- componentDidUpadte()：元件更新後呼叫。
- componentWillUnmont()：元件解除安裝後呼叫。
- componentWillReceiveProps()：元件接受新引數時呼叫。