React組件分兩種：
?????????????? 1.函數(shù)組件
???????????????? 組件傳值，用函數(shù)式形參，自定義一個(gè)屬性進(jìn)行傳值
??????????????????? import React from "react" // 引入react
?????????????????? ? const person = (p)=>{
???????????????????????? return (
??????????????????????????????????? <div> <p>我叫{p.name}，我今年{p.count}歲了</p> <p>{p.children}</p> </div>
????????????? ? ? ? ? ? ? )
????????????????? ? }
??????????????????? export default person // 導(dǎo)出react
???????????? 2.類組件
??????????????????? class render() 存在類組件中，而且必須有的
???????????????????import React from "react"; // 引入react
??????????????????? // 類組件實(shí)現(xiàn)組件
???????????????????class Person extends React.Component {
???????????????????????????? render() {
??????????????????????????????????????? return (
????????????????????????????????????????????? <div>我叫{this.props.name},我今年{this.props.count}</div>
?????????????????????????????????????? )
????????????????????????????? }
??????????????????? }
???????????????????export default Person // 導(dǎo)出react
-------------------------------------------------------------------------------
state狀態(tài)
? ? ? ? 只存在類組件中，函數(shù)組件不存在
??????? 函數(shù)組件（無(wú)狀態(tài)組件）
?????? 類組件（有狀態(tài)組件）
jsx 語(yǔ)法? 屬性名={表達(dá)式||變量}? onClick={}
setState()? 修改狀態(tài)
? 方法事件傳遞? 自定義一個(gè)屬性，將事件傳遞，子組件props 接收，onClick調(diào)用事件
-------------------------------------------------------------------------------------------------------------------------------------
雙向數(shù)據(jù)綁定 （受控組件）
1.子組件加入input 標(biāo)簽，添加onChange 事件。
2.父組件通過(guò)屬性傳遞事件，子組件通過(guò)props接受傳遞過(guò)來(lái)的事件，觸發(fā)onChange事件
3.屬性傳遞的方法，使用箭頭函數(shù)解決this 指向問(wèn)題，并帶形參event傳遞event.target.value
3.父組件定義方法，當(dāng)觸發(fā)onChange，得到event.target.value,通過(guò)setState 改變name 目標(biāo)的值刷新視圖
if分支的使用
let person = null;
? ? if (this.state.isShow) {
? ? ? person=(
? ? ? ? // jsx 語(yǔ)法
? ? ? )
? ? }
render(){
? ? return (
? ? ? ? <div>
? ? ? ? ? ? {person}
? ? ? ? </div>
? ? )
}
JSX 介紹：方便 符合xml 規(guī)范的 js擴(kuò)展語(yǔ)言
?????????? 1.? {/*? */}? 注釋
?????????? 2. 只能有一個(gè)根節(jié)點(diǎn)
?????????? 3. 如果想使用 js語(yǔ)句，{語(yǔ)句}
?????????? 4.class 用className
步驟：
?????? 1，安裝react的腳手架：
? ? ? ? ? ? ? ? ?? npm install -g create-react-app 全局安裝react腳手架
? ? ? ? ? ? ? ? ?? create-react-app 名字(名字不可有大寫)
??????? 2.新建src文件夾，在此文件夾內(nèi)再建component文件夾，在其內(nèi)建一個(gè)person3.js的文件。代碼如下：
3.在該react腳手架文件夾終端內(nèi)輸入指令npm start即可
react 點(diǎn)擊按鈕實(shí)現(xiàn) 顯示隱藏切換 模式，代碼如下（還是上面的App.js）：
/* eslint-disable no-dupe-class-members */
//import logo from './logo.svg';
import './App.css';
import './person.css';
//import Person from './component/person2'
import React from 'react';
import Person from './component/person3'
class App extends React.Component{
??state={
??? CommentList:[
??? ? ? ? ? {id:1,user:"張三",content:"哈哈，是否"},
? ? ? ? ? ? {id:2,user:"李四",content:"哈哈，樣式"},
? ? ? ? ? ? {id:3,user:"王五",content:"哈哈，美感"},
? ? ? ? ? ? {id:4,user:"趙六",content:"哈哈，美國(guó)"},
? ? ? ? ? ? {id:5,user:"吳七",content:"哈哈，小費(fèi)"}
? ? ],
? ? isShow:true,
? ? count:10
? }
? //改變name
? nameClick=()=>{
? ? this.setState({
? ? ? CommentList:[
? ? ? ? {id:1,user:"韓商言",content:"哈哈，是否"},
? ? ? ? {id:2,user:"佟年",content:"哈哈，樣式"},
? ? ? ? {id:3,user:"令山",content:"哈哈，美感"},
? ? ? ? {id:4,user:"吳白",content:"哈哈，美國(guó)"},
? ? ? ? {id:5,user:"demo",content:"哈哈，小費(fèi)"}
]
? ? })
? }
? //受控組件
??changeNameHandle(event){
? ? //event 里面 拿到了 input value值
? ? console.log(event.target.value)
? ? console.log(event.target.length)
? ? if(event.target.value.length<=10){
? ? ? ? //數(shù)組存到 變量P
? ? ? ? let p = this.state.CommentList
? ? ? ? //改變我想改變的地方的值
? ? ? ? p[4].user = event.target.value
? ? ? ? //更新視圖
? ? ? ? this.setState({
? ? ? ? ? CommentList:p
? ? ? ? })
? ? }
? }
? nameClickHeader(){
? ? console.log("收到");
? ? this.setState({
? ? ? CommentList:[
? ? ? ? {id:1,user:"吳亦凡",content:"哈哈，是否"},
? ? ? ? {id:2,user:"李現(xiàn)",content:"哈哈，樣式"},
? ? ? ? {id:3,user:"楊紫",content:"哈哈，美感"},
? ? ? ? {id:4,user:"肖戰(zhàn)",content:"哈哈，美國(guó)"},
? ? ? ? {id:5,user:"王一博",content:"哈哈，小費(fèi)"}
? ? ? ]
? ? })
? }
? //實(shí)現(xiàn)顯示隱藏切換
? switchClick(){
? ? console.log(this.state.isShow)
? ? this.setState({
? ? ? isShow:!this.state.isShow
? ? })
? }
??render(){
? ? let person = null;
? ? if(this.state.isShow){
? ? ? person=(
? ? ? ? <div>
? ? ? ? ? ? <Person clicked={()=>{this.nameClickHeader()}} name={this.state.CommentList[1].user} count={this.state.CommentList[1].content}></Person>
? ? ? ? ? ? <Person name={this.state.CommentList[2].user} count={this.state.CommentList[2].content}></Person>
? ? ? ? ? ? <Person name={this.state.CommentList[3].user} count={this.state.CommentList[3].content}></Person>
? ? ? ? ? ? <Person? changename={(event)=>{this.changeNameHandle(event)}} name={this.state.CommentList[4].user} count={this.state.CommentList[4].content}></Person>
? ? ? ? ? ? {this.state.count}
? ? ? ? </div>
? ? ? )
? ? }
??? return (
????<div className="App">
? ? ? ? <button onClick={this.nameClick.bind(this)} type="button">改變name</button>
? ? ? ? <button onClick={()=>{this.switchClick()}}? type="button">顯示隱藏切換</button>
????? ? {/* <Person clicked={()=>{this.nameClickHeader()}} name={this.state.CommentList[1].user} count={this.state.CommentList[1].content}></Person>
? ? ? ? <Person name={this.state.CommentList[2].user} count={this.state.CommentList[2].content}></Person>
? ? ? ? <Person name={this.state.CommentList[3].user} count={this.state.CommentList[3].content}></Person>
? ? ? ? <Person? changename={(event)=>{this.changeNameHandle(event)}} name={this.state.CommentList[4].user} count={this.state.CommentList[4].content}></Person>
? ? ? ? {this.state.count} */}
? ? ? ? {person}
? ? </div>
??? )
??}
}
export default App;
person3.js代碼如下：
import React from "react" //引入
class Person extends React.Component{
render(){
? ? ? return(
<div>
? <table>
? ? ? ? <tr onClick={this.props.clicked}>
? ???????? ? ? ? <td>用戶</td>
? ? ? ? ? ? ? ? ? <td>{this.props.name}</td>
? ? ? ? ? ? ? ? ? <td>內(nèi)容:</td>
? ? ? ? ? ? ? ? ? <td>{this.props.count}</td>
? ? ? ? ? ? ? ? <td><input type="text" onChange={this.props.changename} defaultValue={this.props.name}/></td>
? ? ? ? </tr>
? </table>
</div>
? ? ? )
}
}
export default Person //導(dǎo)出
