🚗个人主页：最好的人啊
🚌系列专栏：HTML/CSS
🚐推荐一款模拟面试、刷题神奇、从基础到大厂的面试题库，要想走上人生巅峰迎娶白富美赶快点击这个网站⚡不要犹豫，白富美在向你招手，快来注册吧！
目录
一，模块和组件
学过vue的小伙伴对组件这个概念应该不是很陌生了，废话少说直接来！
1，模块
理解：向外提供特定功能的js程序,一般就是一个js文件。
为什么：要拆成模块，随着业务逻辑增加,代码越来越多且复杂。
作用：复用js,简化js的编写,提高js运行效率。
2，模块化
当应用的js都以模块来编写,这个应用就是一个模块化的应用
3，组件
理解：用来实现局部功能效果的代码和资源的集合(html/css/js/img等等)
为什么：要用组件，一个界面的功能复杂
作用：复用编码,简化项目编码,提高运行效率
4，组件化：
当应用是以多组件的方式实现,这个应用就是组件化的应用
二，函数式组件，复合函数组件，类式组件
实质：一个 React 应用就是构建在 React 组件之上的。
函数组件：该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。
1，创建函数组件
function HelloPerson(){
return <h1>你好，我是函数式组件!</h1>;
}
ReactDOM.render(<HelloPerson/>,document.getElementById('hello'));注释：解析组件标签HelloPerson，发现组件是函数定义的，调用该函数，将返回的虚拟DOM，转为真实的DOM，随后呈现在页面上。
2，Props参数传递（重点）
function HelloPerson(person){
console.log(this);//此处undefined babel编译后采取严格模式
return (
<ul>
<li>姓名：{person.name}</li>
<li>年龄：{person.age}</li>
</ul>
)
}
ReactDOM.render(<HelloPerson name='张三' age={18}/>,document.getElementById('hello'));3，复合函数组件
function GetName(props){
return <li>姓名：{props.name}</li>
}
function GetAge(props){
return <li>年龄：{props.age}</li>
}
function HelloPerson(person){
return (
<ul>
<GetName name={person.name}/>
<GetAge age={person.age}/>
</ul>
)
}
ReactDOM.render(<HelloPerson name='张三' age={18}/>,document.getElementById('hello'));4，类式组件
ES6 的 class 来定义组件，通过继承React.Component。解析流程如下：
React解析组件标签，找到了MyComponent组件。
发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
5，创建实例
//创建类组件 1:继承react中的Component类 2：需要render
class Person extends React.Component{
render(){
return (
<h1>你好，我是类式组件！</h1>
)
}
},
ReactDOM.render(<Person/>,document.getElementById("hello"));用户自定义组件
const element = <Person/>
ReactDOM.render(element,document.getElementById("hello"));三，组件实例的三大属性
1，React State(状态)
概念：state是组件对象最重要的属性,值是对象(可以包含多个key:value的组合)，组件被称为`状态机`,通过更新组件的state来更新对应的页面显示(重新渲染组件)，有state称为复杂组件。
1-1，State的用法
class IsLike extends React.Component {
state = {
flag: true,//默认是喜欢
age: 19,
}
//箭头函数的this和上下文有关 静态的不可改变的
changeFlag = () => {
// this.state.flag = !this.state.flag;
this.setState({ flag: !this.state.flag });
}
render() {
const { flag } = this.state;
return (
<div>
<button className={flag ? "btn" : "btn no"} onClick={this.changeFlag}>{flag ? "喜欢" : "不喜欢"}</button>
</div>
)
}
}
ReactDOM.render(<IsLike />, document.getElementById("root"));效果图：
默认样式：
点击后： 
2，react this指向问题
demo(){
console.log(this);//undefined
console.log('事件被点击了');
}实例演示：
class Person{
constructor(name,age) {
this.name = name;
this.age = age;
}
say(){
console.log(this);
}
}
const p1 = new Person('张三',18);
p1.say();//p1为实例对象
const p2 = p1.say;
p2();//undefined 类采取是严格模式3，props
每个组件对象都会有props(properties的简写)属性。
组件标签的所有属性都保存在props中。
props 是不可变的，只能通过 props 来传递数据。
class Person extends React.Component{
render(){
const {name,age} = this.props;
return (
<ul>
<li>姓名：{name}</li>
<li>年龄：{age}</li>
</ul>
)
}
}
ReactDOM.render(<Person name='张三' age='18'/>,document.getElementById('hello'));
3-1 ...运算符
//扩展运算符复习
let arr = [1,2,3,4,5];
let arr2=[7,8,9];
console.log(...arr);//展开输出
let arr3 = [...arr,...arr2];//合并两个数组
console.log(arr3);
//函数的使用
function sum(...nums){
let sums = nums.reduce(function(preValue,currentValue){
return preValue+currentValue;
})
console.log(sums);
}
sum(1,2,3,4,5);
//类的使用
let person = {name:'张三',age:19};
let person2 = {...person};
person.name='李四';
console.log(person2);3-2 批量传递参数
let p1 = {name:'张三',age:29};
ReactDOM.render(<Person {...p1}/>,document.getElementById('hello'));3-3 propTypes参数的限制
引入依赖包：<script src="js/prop-types.js"></script>
class Person extends React.Component{
render(){
const {name,age,sex} = this.props;
return (
<ul>
<li>姓名：{name}</li>
<li>年龄：{age}</li>
<li>性别：{sex}</li>
</ul>
)
}
static propTypes = { 当你有个静态属性 propTypes
name:PropTypes.string.isRequired,
age:PropTypes.number,
}
static defaultProps = {
sex:'未知',
}
}说明：static 直接通过类调用，而非实例对象调用，称为静态方法。
//用法举例
class Person{
constructor(age) {
this.age = 10;
}
name='张三';
static palymethod(){
console.log('我会玩');
}
}
Person.palymethod();//我会玩
let p1 = new Person();
p1.palymethod();//错误3-4函数组件使用props
function Person(props){
const {name,age} = props;
return (
<ul>
<li>姓名：{name}</li>
<li>年龄：{age}</li>
</ul>
)
}
Person.propTypes = {
name:PropTypes.string.isRequired,
age:PropTypes.number
}
Person.defaultProps = {
age:29
}
let p1 = {name:'张三'}
ReactDOM.render(<Person {...p1}/>,document.getElementById('hello'));4，refs
定义：组件内的标签可以定义ref来标识自己。
4-1 字符串形式的ref
class Demo extends React.Component{
showData = ()=>{
//字符串形式的ref
let input1 = this.refs.input1;
alert(input1.value);
}
showData2 = ()=>{
let input2 = this.refs.input2;
alert(input2.value);
}
render(){
return (
<div> <input ref="input1" type="text" placeholder="点击时提示信息" /><br/><br/>
<input onClick={this.showData} type="button" value="点击显示信息"/><br/><br/>
<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点时显示信息" />
</div>
)
}
}
ReactDOM.render(<Demo/>,document.getElementById('hello'));4-2 回调函数下ref
class Demo extends React.Component{
showData = ()=>{
//回调函数下创建ref
const {input1}=this;
console.log(input1.value);
}
showData2 = ()=>{
const {input2}=this;
console.log(input2.value);
}
render(){
return (
<div>
<input ref={c=> this.input1 = c} type="text" placeholder="点击时提示信息" /><br/><br/>
<input onClick={this.showData} type="button" value="点击显示信息"/><br/><br/>
<input ref={c=> this.input2 = c} onBlur={this.showData2} type="text" placeholder="失去焦点时显示信息" />
</div>
)
}
}
ReactDOM.render(<Demo/>,document.getElementById('hello'));4-3 类绑定形式下ref
getinput1 = (c)=>{
this.input1 = c;
}
4-4 createRef 创建ref容器
class Demo extends React.Component{
input1 = React.createRef();
input2 = React.createRef();
showData = ()=>{
//回调函数下创建ref
const {input1}=this;
console.log(input1.current.value); //
}
showData2 = ()=>{
const {input2}=this;
console.log(input2.current.value);
}
render(){
return (
<div>
<input ref={this.input1} type="text" placeholder="点击时提示信息" /><br/><br/>
<input onClick={this.showData} type="button" value="点击显示信息"/><br/><br/>
<input ref={this.input2} onBlur={this.showData2} type="text" placeholder="失去焦点时显示信息" />
</div>
)
}
}
ReactDOM.render(<Demo/>,document.getElementById('hello'));
本文含有隐藏内容，请 开通VIP 后查看