react入门笔记

初始化

1. 全局的 create-react-app 已不再维护,需要卸载
   npm uninstall -g create-react-app

   查看卸载是否成功
   create-react-app -V

   若返回了版本号,则需要手动卸载
   which create-react-app
   ->/usr/local/bin/create-react-app
   rm -rf /usr/local/bin/create-react-app

2. 在使用架手架初始化
   npx create-react-app my-app // my-app是项目名

3. 暴露出webpack配置文件
   npm run eject

4. 若使用sass
   npm i sass-loader sass 后即可使用
   用的时候 将css文件后缀改为.scss

5. 若使用less
   先安装
   npm install less-loader less --save
   找到下面这段代码

在这下面直接添加以下代码：

    const lessRegex = /\.less$/;
    const lessModuleRegex = /\.module\.less$/;
	在此文件中搜索 oneof
	可以看到关于sass部分的配置，那我们再加入less的相关配置：先复制一份，将sass部分修改为less，再加入oneOf数组。

基本知识

jsx语法规则

// 1 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
// 2 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
1.定义虚拟DOM时，不要写引号。
2.标签中混入JS表达式时要用{}。
3.样式的类名指定不要用class，要用className。
4.内联样式，要用style={{key:value}}的形式去写。
5.只有一个根标签
6.标签必须闭合
7.标签首字母
		(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
		(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

组件三大实例属性

state

1.state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
2.组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
/*
     初始化state
                     */ 
 constructor(props){
	    super(props)
		//初始化状态
		this.state = {
			isHot:false,
			wind:'微风'
		}
	}
	// 或者
	class Weather extends React.Component{
		//初始化状态
		state = {isHot:false,wind:'微风'}
	}
	/*
    更新state
                     */ 
    const isHot = this.state.isHot; //使用
    this.setState({isHot:!isHot}) // 设置

props

1.通过标签属性从组件外向组件内传递变化的数据
2.注意: 组件内部不要修改props数据
传值
<Person name="tom" age={18} sex="女"/>
或者
<Person {...p}/>
const p = {name:'老刘',age:18,sex:'女'}
取值
//props是只读的 不可修改
const {name,age,sex} = this.props;
// 对传值进行限制
npm i prop-types -S
class Person extends Components{}
Person.propTypes = {
	name:PropTypes.string.isRequired, //限制name必传，且为字符串
	sex:PropTypes.string,//限制sex为字符串
	age:PropTypes.number,//限制age为数值
	speak:PropTypes.func,//限制speak为函数
}
//指定默认标签属性值
Person.defaultProps = {
	sex:'男',//sex默认值为男
	age:18 //age默认值为18
}
//class构造器接收props
constructor(props){
	//构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props
	// console.log(props);
	super(props)
	console.log('constructor',this.props);
}

函数组件使用props

function Person (props){
	const {name,age,sex} = props
	return (
			<ul>
				<li>姓名：{name}</li>
				<li>性别：{sex}</li>
				<li>年龄：{age}</li>
			</ul>
		)
}
Person.propTypes = {
	name:PropTypes.string.isRequired, //限制name必传，且为字符串
	sex:PropTypes.string,//限制sex为字符串
	age:PropTypes.number,//限制age为数值
}

//指定默认标签属性值
Person.defaultProps = {
	sex:'男',//sex默认值为男
	age:18 //age默认值为18
}

refs

//  意义
// 组件内的标签可以定义ref属性来标识自己
使用
// 字符串形式
<input ref="input2" onBlur={this.showData2} type="text"/>
showData2 = ()=>{
		const {input2} = this.refs
		alert(input2.value)
}
//回调函数形式
<input onBlur={this.showData2} ref={c => this.input2 = c } type="text"/>
showData2 = ()=>{
	const {input2} = this
	alert(input2.value)
}
// createRef的使用
/* 
	React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的
 */
	myRef2 = React.createRef()
	<input onBlur={this.showData2} ref={this.myRef2} type="text"/>
	showData2 = ()=>{
				alert(this.myRef2.current.value);
	}

解决自定义方法this为undefined问题

// 方式1
// 使用箭头函数定义
showData2 = ()=>{}
// 方式2 
// constructor中绑定this
constructor(props){
	this.changeWeather = this.changeWeather.bind(this)
}
changeWeather() {}
// 触发时使用箭头函数
<li onClick={()=> {this.goDetail(item.id)}}>{item.value}</li>
goDetail(){}

路由

react入门笔记之路由

数据共享

react入门笔记之数据共享

生命周期

参考地址
react入门笔记之组件生命周期.
react各生命周期函数使用场景.