React组件分两种：
1.函数组件
组件传值，用函数式形参，自定义一个属性进行传值
import React from "react" // 引入react
const person = (p)=>{
return (
<div> <p>我叫{p.name}，我今年{p.count}岁了</p> <p>{p.children}</p> </div>
)
}
export default person // 导出react
2.类组件
class render() 存在类组件中，而且必须有的
import React from "react"; // 引入react
// 类组件实现组件
class Person extends React.Component {
render() {
return (
<div>我叫{this.props.name},我今年{this.props.count}</div>
)
}
}
export default Person // 导出react
-------------------------------------------------------------------------------
state状态
只存在类组件中，函数组件不存在
函数组件（无状态组件）
类组件（有状态组件）
jsx 语法 属性名={表达式||变量} onClick={}
setState() 修改状态
方法事件传递 自定义一个属性，将事件传递，子组件props 接收，onClick调用事件
-------------------------------------------------------------------------------------------------------------------------------------
双向数据绑定 （受控组件）
1.子组件加入input 标签，添加onChange 事件。
2.父组件通过属性传递事件，子组件通过props接受传递过来的事件，触发onChange事件
3.属性传递的方法，使用箭头函数解决this 指向问题，并带形参event传递event.target.value
3.父组件定义方法，当触发onChange，得到event.target.value,通过setState 改变name 目标的值刷新视图
if分支的使用
let person = null;
if (this.state.isShow) {
person=(
// jsx 语法
)
}
render(){
return (
<div>
{person}
</div>
)
}
JSX 介绍：方便 符合xml 规范的 js扩展语言
1. {/* */} 注释
2. 只能有一个根节点
3. 如果想使用 js语句，{语句}
4.class 用className
步骤：
1，安装react的脚手架：
npm install -g create-react-app 全局安装react脚手架
create-react-app 名字(名字不可有大写)
2.新建src文件夹，在此文件夹内再建component文件夹，在其内建一个person3.js的文件。代码如下：
3.在该react脚手架文件夹终端内输入指令npm start即可
react 点击按钮实现 显示隐藏切换 模式，代码如下（还是上面的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:"哈哈，美国"},
{id:5,user:"吴七",content:"哈哈，小费"}
],
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:"哈哈，美国"},
{id:5,user:"demo",content:"哈哈，小费"}
]
})
}
//受控组件
changeNameHandle(event){
//event 里面 拿到了 input value值
console.log(event.target.value)
console.log(event.target.length)
if(event.target.value.length<=10){
//数组存到 变量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:"李现",content:"哈哈，样式"},
{id:3,user:"杨紫",content:"哈哈，美感"},
{id:4,user:"肖战",content:"哈哈，美国"},
{id:5,user:"王一博",content:"哈哈，小费"}
]
})
}
//实现显示隐藏切换
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>内容:</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 //导出
