首先,要用react的话,需要在页面中引入三个基础的react包
react.development.js
react-dom.development.js
babel.min.js
这个基本的三个包,但是还要注意一点在写js代码时可能会非常繁琐,所以要引入最后一个包,目的是为了写JSX语法,但引入方式不再是简单的 type="text/javascript" 而是 type="text/babel" 目的是转化成JSX语法
React的语法跟Vue有一点像但又很不一样,他是通过实例去挂载组件到页面上,分别有俩种方式,一种是函数式组件,一种是类式组件
- 函数式组件:只能简单去渲染 DOM,不能实现复杂的操作
- 类式组件:可以有有很多事件进行操作.
React中的三大属性 state props refs
- state中的写法
<script type="text/babel"> /*此处必须是babel */ //1.创建组件 class Weather extends React.Component { // 初始化状态 state = { isHot: false } render() { const { isHot } = this.state return <h1 id="title" onClick={this.changeWeather}> 今天天气很{isHot ? '炎热' : '凉爽'}</h1 > } // 自定义方法 --- 要用赋值语句+箭头函数 changeWeather = () => { const isHot = this.state.isHot; this.setState({ isHot: !isHot }) } } //2.渲染虚拟DOM到页面 ReactDOM.render(<Weather />, document.getElementById('test')) </script>
props
class Person extends React.Component {
render() {
const { name, age, sex } = this.props
return (
<ul>
<li>姓名:{name}</li>
<li>年龄:{age + 1}</li>
<li>性别:{sex}</li>
</ul>
)
}
}
const p = { name: 'tom', age: 12, sex: '男' }
ReactDOM.render(<Person name="jack" age={20} sex="男" />, document.getElementById('test'))
ReactDOM.render(<Person name="marry" age={12} sex="男" />, document.getElementById('test1'))
ReactDOM.render(<Person {...p} />, document.getElementById('test2'))
refs中的写法
1.字符串型
<script type="text/babel"> /*此处必须是babel */
class Demo extends React.Component {
showData = () => {
const { input1 } = this.refs
alert(input1.value)
}
showData2 = () => {
const { input2 } = this.refs
alert(input2.value)
}
render() {
return (
<div>
<input ref="input1" type="text" placeholder="点击按钮提示数据" />
<button onClick={this.showData}>点我提示左侧数据</button>
<input ref="input2" onBlur={this.showData2} type="text" placeholder='失去焦点提示数据' />
</div>
)
}
}
ReactDOM.render(< Demo />, document.getElementById('test'))
</script>
2.回调函数型
class Demo extends React.Component {
showData = () => {
const { input1 } = this
// alert(input1.value)
}
showData2 = () => {
const { input2 } = this
// alert(input1.value)
}
render() {
return (
<div>
<input ref={(e) => { this.input1 = e }} type="text" placeholder="点击按钮提示数据" />
<button onClick={this.showData}>点我提示左侧数据</button>
<input onBlur={this.showData2} ref={(e) => { this.input2 = e }} type="text" placeholder="失去焦点按钮提示数据" />
</div>
)
}
}
ReactDOM.render(< Demo />, document.getElementById('test'))
3.createRef型
class Demo extends React.Component {
/*
React.createRef调用后可以返回一个容器,该容器可以存储ref所标识的节点,该容器是"专人专用"的
*/
myRef = React.createRef()
showData = () => {
const { input1 } = this
// alert(input1.value)
}
showData2 = () => {
const { input2 } = this
// alert(input1.value)
}
render() {
return (
<div>
<input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />
<button onClick={this.showData}>点我提示左侧数据</button>
</div>
)
}
}
ReactDOM.render(< Demo />, document.getElementById('test'))
类中也有很多知识点
class Person {
constructor(name, age) {
// 构造器中的this是谁?-----类的实例对象
this.name = name;
this.age = age;
}
// 一般方法
speak() {
//speak方法放在了哪里? ---类的原型对象,供实例使用
//通过Person 实例调用speak时,speak中的this就是Person实例
console.log(`我叫${this.name},今年${this.age}`);
}
}
// 创建一个Student类,继承Person类
class Student extends Person {
constructor(name, age, grade) {
super(name, age)
this.grade = grade
}
}
const s1 = new Student('校长', 50, '高一');
console.log(s1);
还有扩展运算符
let arr1 = [1, 3, 5, 7, 9];
let arr2 = [2, 4, 6];
console.log(...arr1);//展开一个数组
let arr3 = [...arr1, ...arr2];//连接一个数组
// 在函数中使用
function sum(...number) {
const sum = number.reduce((preValue, CurrentValue) => {
return preValue + CurrentValue
})
console.log('@', number);
return sum
}
console.log(sum(1, 2, 3, 4, 5));
// 构造自变量对象时展开对象
let person = { name: 'tom', age: 12, sex: '男' }
let person1 = { ...person };
person.name = 'jerry'
console.log(person);
console.log(person1);
let person2 = { ...person, name: 'jack' }
console.log(person2);
// console.log({ ...person });
这是近期学习react中总结的知识点.