基础部分
创建一个react的项目
-
创建一个react的项目
全局安装 react 指令
// 全局安装react （根据需要安装，不是必须的） npm i -g react // 或者 yarn -global react // 全局安装 react的脚手架 (创建react的应用，必须安装脚手架) npm i -g create-react-app // 或者 yarn -global create-react-app使用脚手架创建应用
create-react-app 应用名称 // 例如创建一个TodoList应用 create-react-app todo-list注意点：
1.全局安装create-react-app才能使用脚手架创建应用 2.应用名称全部为小写字母，不能出现“TodoList”这样的名称
组件的使用
-
组件的组成
// React 是react组件必不可少的，用于支持jsx语法的模块，虽然看不到引用，但是不能少 // Component 所有的react的组件都继承于Component，它是react组件的基类 import React, { Component } from 'react'; // TodoItem 自定义的组件 import TodoItem from "./TodoItem" // 定义TodoList组件 ，该组件继承于基类Component class TodoList extends Component { /*** * constructor 当前类的构造函数 * props 简单的理解：是父类传递的参数，例如 传递的值 或 方法，它是一个对象 * super(props) 简单的理解是：继承父类中的传递的参数 **/ constructor(props){ super(props) // state 是 所有react变量的仓储，简单理解就是：当前组件的变量都放在这个对象中 this.state = { inputValue: "", List: [] } // 使用 bind绑定this，让方法中的this永远指向当前的组件（可根据需求改变this的指向） this.getList = this.getList.bind(this) this.inputChang = this.inputChang.bind(this) this.addItem = this.addItem.bind(this) this.delItem = this.delItem.bind(this) } // react组件必不可少的方法，return 返回的是jsx的模板，可以理解为类似html+js的模板 render() { return ( {/*在jsx中只能有一个根标签，使用<></>(幽灵标签)包裹，既能满足jsx的语法格式，在浏览器解析时不会解析幽灵标签，减少了dom树结构节点 */} <> <div> <input value={this.state.inputValue} onChange={this.inputChang} /> <button onClick={this.addItem}>添加</button> </div> <ul> {this.getList()} </ul> </> ); }; // 遍历输出item getList() { ... } // 动态改变输入框的值 inputChang( e ) { ... } // 添加item addItem() { ... } // 删除item delItem(index) { ... } } // 导出TodoList export default TodoList; -
认识jsx
简单的jsx的语法
... render() { return ( {/*在jsx中只能有一个根标签，使用<></>(幽灵标签)包裹，既能满足jsx的语法格式，在浏览器解析时不会解析幽灵标签，减少了dom树结构节点 */} <> <div> <input value={this.state.inputValue} onChange={this.inputChang} /> <button onClick={this.addItem}>添加</button> </div> <ul> {this.getList()} </ul> </> ); }; ...-
在jsx中只能有一个根标签，使用<></>(幽灵标签)包裹，既能满足jsx的语法格式，在浏览器解析时不会解析幽灵标签，减少了dom树结构节点,也可以使用代码片段（Fragments ），效果和<></>相同，只是Fragments 还有更广泛的使用，后面会有详细说明
-
在jsx中使用注释，多行使用{/* 注释内容 */}，单行使用
// 多行 {/* 多行注释内容 */} {/* 多行注释内容 */} // 单行 { // 单行注释内容 } -
在jsx中使用组件的变量或者方法，使用{}包裹
-
在jsx中绑定的方法默认this指向undefined，所以需要使用bind绑定this的指向
// 方式1： 在constructor指定this constructor(props){ super(props) this.state = { inputValue: "", List: [] } this.getList = this.getList.bind(this) this.inputChang = this.inputChang.bind(this) this.addItem = this.addItem.bind(this) this.delItem = this.delItem.bind(this) } // 方式2：绑定事件的时候指定this ... <li onClick={this.delItem.bind(this,index)}></li> ...
-
-
组件的基本通讯
-
最简单的 父 ---> 子 传值
// 父组件通过在子组件标签上设置属性传递数据 <Boy teacherName={ this.state.teacherName } /> <Girl teacherName={ this.state.teacherName } /> // 子组件通过this.props获取父组件传递的数据 // this.props.teacherName 获取老师的名称 render(){ return ( <> <p> 我是{this.state.boyName},我的老师是{this.props.teacherName}, 我对老师很 <button onClick={()=> this.props.say(this.state.boyName,"满意") } > 满意 </button> </p> </> ) } -
最简单的 子 ---> 父 通讯
// 父组件通过在子组件标签上设置属性传递数据 <Boy say = { this.stuSay } /> <Girl say = { this.stuSay } /> // 子组件通过this.props获取父组件传递的数据 // this.props.say 获取父组件提供的方法，通过调用父组件的方法，将传递的数据作为参数传入，当父组件的方法被调用，就通过获取当前方法参数的方式，得到了子组件传递的数据 render(){ return ( <> <p> 我是{this.state.boyName}, 我对老师很 <button onClick={()=> this.props.say(this.state.boyName,"满意") } > 满意 </button> </p> </> ) } -
最简单的非父子通讯
核心思路：找到共同的父组件，同时使用父组件传递的值和方法
过程有些复杂，这里省略了
teacher.js
import React,{ Component } from "react"
// 导入 Boy（男孩） 和 Girl（女孩） 组件
import Boy from "./boy"
import Girl from "./girl"
export default class Teacher extends Component {
constructor(props){
super(props)
this.state = {
teacherName: "Tom",
stuName: "",
stuSayContent: "",
boyName: "",
girlName: "",
boySayContent: "",
girlSayContent: ""
}
this.stuSay = this.stuSay.bind(this);
this.boySaySecret = this.boySaySecret.bind(this);
this.grilSaySecret = this.grilSaySecret.bind(this);
}
render(){
let evaluation = false
if (this.state.stuName!=="" && this.state.stuSayContent) {
evaluation = true
}
return (
<>
<p>我是{ this.state.teacherName }老师</p>
<div>
{
evaluation ? (<p>学生评价：{this.state.stuName}对我很{this.state.stuSayContent}</p>) : " "
}
</div>
<Boy
say = { this.stuSay }
teacherName={ this.state.teacherName }
boySaySecret = {this.boySaySecret}
girlSayContent = {this.state.girlSayContent}
/>
<Girl
say = { this.stuSay }
teacherName={ this.state.teacherName }
grilSaySecret = {this.grilSaySecret}
boySayContent = {this.state.boySayContent}
/>
</>
)
}
stuSay(stuName,stuSayContent){
this.setState(()=>{
return {
stuSayContent,
stuName
}
})
}
boySaySecret(constent){
this.setState(()=>{
return {
boySayContent : constent
}
})
}
grilSaySecret(constent){
this.setState(()=>{
return {
girlSayContent : constent
}
})
}
}
boy.js
import React,{ Component } from "react"
export default class Boy extends Component {
constructor(props){
super(props)
this.state = {
boyName: "龙震天"
}
}
render(){
return (
<>
<p>
我是{this.state.boyName},我的老师是{this.props.teacherName},
我对老师很
<button onClick={()=> this.props.say(this.state.boyName,"满意") } >
满意
</button>,
我想对女孩说：<button onClick={()=> this.props.boySaySecret("我喜欢你")}>悄悄话</button>，
她对我说：{this.props.girlSayContent}
</p>
</>
)
}
}
gril.js
import React,{ Component } from "react"
export default class Boy extends Component {
constructor(props){
super(props)
this.state = {
girlName: "怜香玉"
}
}
render(){
return (
<>
<p>
我是{this.state.girlName}，我的老师是{this.props.teacherName},
我对老师很
<button onClick={()=> this.props.say(this.state.girlName,"不满意") } >
不满意
</button>,
我想对男孩说：<button onClick={() => this.props.grilSaySecret("我也是")}>悄悄话</button>，
他对我说：{this.props.boySayContent}
</p>
</>
)
}
}
高级部分
待续....