React非脚手架知识点总结_在非脚手架环境中react两个类组件如何互相调用-CSDN博客

<div id="root"></div>
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>
  <script type="text/babel">
    ReactDOM.render(<h1>你好</h1>, document.querySelector('#root'))
  </script>

3、jsx语法规则

类名使用 className 样式 style = {{ color:'white' }} <ul>{ 这个里面写js代码 }</ul>

4、定义组件

（1）函数式组件

function Demo() {
      console.log(this); //这个指向的是undefined，因为开启了严格模式
      return (<h1>函数式组件</h1>)
    }
    ReactDOM.render(<Demo />, document.querySelector('#root'))

（2）类式组件

class Demo extends React.Component {
      render() {return (<h1>我是类式组件</h1>)}
    }
    ReactDOM.render(<Demo />, document.querySelector('#root'))

5、组件的三大属性 state

class Demo extends React.Component {
      state = { count: 1 }
      add = () => {
        const count = this.state.count + 1
        this.setState({ count })
      }
      render() {
        return (
          <button onClick={this.add}>点我加一{this.state.count}</button>
        )
      }
    }
    ReactDOM.render(<Demo />, document.querySelector("#root"))

6、组件的三大属性 props （只读属性）

（1）函数式组件的props（注意props限制，需要引入新的js）注意函数的验证

<script src="../js/prop-types.js"></script>
  <script type="text/babel">
    class Demo extends React.Component {
      render() {
        return (
          <h1>{this.props.name},{this.props.age}</h1>
        )
      }
      static propTypes = {  //指定默认标签属性值
        name: PropTypes.string.isRequired,
        age: PropTypes.number,
        fun: PropTypes.func
      }
      static defaultProps = {  //默认值
        name: 'tom',
        age: 14
      }
    }
    ReactDOM.render(<Demo name="jack" />, document.querySelector("#root"))
  </script>

（2）函数式组件的props（传值过多的时候可以用下面的方法简写）

    function Demo(props) {
      return (
        <h1>{props.name},{props.age},{props.sex}</h1>
      )
      Demo.propTypes = {
        name: PropTypes.string.isRequired, //限制为字符串,必传
        sex: PropTypes.string,    //限制为字符串
        age: PropTypes.number,    //限制为数值
        speak: PropTypes.func, //限制为函数
      }
      Demo.defaultProps = {
        sex: '男', //默认sex为男
        age: 17   // 默认age为17
      }
    }
    const person = { name: '老刘', age: 18, sex: '女' }
    ReactDOM.render(<Demo  {...person} />, document.querySelector("#root"))

7、主键的三大属性 ref

（1）字符串形式

class Demo extends React.Component {
      show = () => {
        const { input } = this.refs
        alert(input.value)
      }
      render() {
        return (
          <input ref="input" type="text" onBlur={this.show} placeholder="失去焦点提示数据" />
        )
      }
    }

（2）回调函数的ref

class Demo extends React.Component {
      show = () => {
        alert(this.input.value)
      }
      render() {
        return (
          <input ref={c => this.input = c} type="text" onBlur={this.show} placeholder="失去焦点提示数据" />
        )
      }
    }

（3）React.createRef容器

class Demo extends React.Component {
      //  React.createRef调用后可以返回一个容器,该容器可以存储被ref标识的节点,该容器是"专人专用"的
      myRef = React.createRef()
      show = () => {
        alert(this.myRef.current.value)
      }
      render() {
        return (
          <input ref={this.myRef} type="text" onBlur={this.show} placeholder="失去焦点提示数据" />
        )
      }
    }

8、事件处理

show = (e) => {console.log(e.target);}

render() {return (<input ref={this.myRef} type="text" onBlur={this.show} placeholder="失去焦点提示数据" />)}}

9、react收集表单数据

（1）非受控组件

class Demo extends React.Component {
      myRef = React.createRef()
      show = (e) => { console.log(e.target.value); }
      render() { return (<input ref={this.myRef} type="text" onBlur={this.show} placeholder="失去焦点提示数据" />) }
    }

（2）受控组件

class Demo extends React.Component {
      state = { username: "" }
      save = (e) => {
        this.setState({
          username: e.target.value
        })
      }
      render() {
        return (
          <div>
            <h3>你好：{this.state.username}</h3>
            <input onChange={this.save} type="text" onBlur={this.show} placeholder="失去焦点提示数据" />
          </div>
        )
      }
    }

10、高阶函数_柯里化

高阶函数:如果一个函数符合下面2个规范中的任何一个,那么该函数就是高阶函数

1.若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数

2.若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数

常见的高阶函数有:promise setTimeout

函数柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式

function sum(a) {

return (b) => {

return (c) => {

return a + b + c

}

}

}

class Demo extends React.Component { // 使用柯里化实现
      state = { username: "", password: "" }
      save = dataType => {
        return (e) => {
          this.setState({
            [dataType]: e.target.value   //这个是最妙的
          }, () => {
            console.log(this.state.username);
            console.log(this.state.password);
          })
        }
      }
      render() {
        return (
          <div>
            用户名：<input type="text" onChange={this.save("username")} />
            密  码：<input type="text" onChange={this.save("password")} />
          </div>
        )
      }
    }

      saveFormDate = (dataType, event) => {  //不使用柯里化实现
        this.setState({ [dataType]: event.target.value })
      }
 用户名: <input onChange={(event) => { this.saveFormDate('username', event) }} type="text" name="username" />
            密码: <input onChange={(event) => { this.saveFormDate('password', event) }} type="password" name="password" />

11、组件的生命周期（旧）

`（1）componentDidMount()` 方法会在组件已经被渲染到 DOM 中后运行，所以，最好在这里设置计时器：

（2）我们会在 `componentWillUnmount()` 生命周期方法中清除计时器：

（3）强制更新 this.forceUpdate()

（4）组将将要挂载的钩子 componentWillMount() {console.log('Count---componentWillMount');}

（5）组件挂载完毕的钩子 componentDidMount() {console.log('Count---componentDidMount');}

（6）组件将要卸载的钩子 componentWillUnmount() {console.log('Count---componentWillUnmount');}

（7）控制组件更新的阀门 shouldComponentUpdate() {console.log("COunt---shouldComponentUpdate");return true;}

（8）组件将要更新的钩子 componentWillUpdate() {console.log('Count---componentWillUpdate');}

（9）组件更新完毕的钩子 componentDidUpdate() {console.log('Count---componentDidUpdate');}

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染

1.constructor()

2.componentWillMount()

3.render()

4.componentDidMount() =====>常用

一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息

2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发

1.shouldComponentUpdate()

2.componentWillUpdate()

3.render() =======>必须

4.componentDidUpdate()

3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发

1.componentWillUnmount() =======>常用

一般再这个钩子中做一些收尾的失事情，例如：关闭定时器、取消订阅消息

11、组件的生命周期（新）

// 不做过多探讨用法极其罕见 若state的值在任何情况下都取决于props，那么就可以使用getDeriverStateFromProps
      static getDerivedStateFromProps(props, state) {
        console.log("Count---getDerivedStateFromProps", props, state);
        return null
      }
      getSnapshotBeforeUpdate() {
        return this.refs.list.scrollHeight
      }

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染

1.constructor()

2.getDerivedStateFromProps

3.render()

4.componentDidMount() =====>常用

2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发

1.getDerivedStateFromProps

2.shouldComponentUpdate()

3.render() ======>必用

4.getSnapshotBeforeUpdate

5.componentDidUpdate()

3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发 =====>常用