React学习中遇到的知识点

首先,要用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>&nbsp;
                        <input ref="input2" onBlur={this.showData2} type="text" placeholder='失去焦点提示数据' />&nbsp;
                    </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>&nbsp;
                        <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>&nbsp;
                    </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中总结的知识点.