初始化
-
全局的 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 -
在使用架手架初始化
npx create-react-app my-app // my-app是项目名 -
暴露出webpack配置文件
npm run eject -
若使用sass
npm i sass-loader sass 后即可使用
用的时候 将css文件后缀改为.scss -
若使用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各生命周期函数使用场景.