react笔记1

Posted 2020-09-17 escapist

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react笔记1相关的知识，希望对你有一定的参考价值。

1.组件内部可以是组件

import React from "react";
import ReactDOM from "react-dom";//渲染到页面上

// 可以是组件
class ChildA extends React.Component{
  render(){
    return <div>{this.props.name}</div>
  }
}

class Root extends React.Component{
  render(){
    return (<div><h3>hello,world</h3>
    <ChildA name="wanglei"/></div>);
  }
}
ReactDOM.render(<Root/>,document.getElementById(\'root\'));

2.组件通过state属性来保存组件的内部状态变量

import React from "react";
import ReactDOM from "react-dom";

class Root extends React.Component {
    state={value:\'abc\'};
    render(){
        return <h2>{`hello,${this.state.value}`}</h2>
    }
}

ReactDOM.render(<Root />,document.getElementById(\'root\'));

3.state属性是只读的，只能通过setState()方法来修改

import React from "react";
import ReactDOM from "react-dom";

class Root extends React.Component {
    state={value:\'abc\'};
    render(){
        setTimeout(()=>this.setState({value:"wang"}),2000); // 表示2秒后自动改变
        return <h2>{`hello,${this.state.value}`}</h2>
    }
}
ReactDOM.render(<Root />,document.getElementById(\'root\'));

4.组件内部各个兄弟组件间值的传递

class Root extends React.Component{
  state={value:\'abc\'};
  handlerChange(e){ // 绑定的函数
    this.setState({value:e.target.value});

  }
  render(){
    return (<div><h3>hello,world</h3>
          <input value={this.state.value} onChange={this.handlerChange.bind(this)}/>
          <span>outer:{this.state.value}</span>  //这里面的值会随着 input 标签里面的值改变而改变
    </div>);
  }
}
ReactDOM.render(<Root/>,document.getElementById(\'root\'));

5.复杂一点的封装

import React from "react";
import ReactDOM from "react-dom";

class ChildA extends React.Component{
  render(){
    return <div>{`hello,${this.props.val}`}</div>
  }
}
class Root extends React.Component{
  state={value:\'abc\'};
  handlerChange(e){ // 绑定的函数
    this.setState({value:e.target.value}); // 在ag里面叫双向绑定

  }
  render(){
    return (<div><h3>hello,world</h3>
          <input value={this.state.value} onChange={this.handlerChange.bind(this)}/>
          <ChildA val={this.state.value}/>
    </div>);
  }
}
ReactDOM.render(<Root/>,document.getElementById(\'root\'));

6.怎样将外部组件里面的值传递出来 :组件之间通过props来通信

import React from "react";
import ReactDOM from "react-dom";

class InputComponent extends React.Component{  // 怎样将 InputComponent里面的值传递到下面的span里面
  render(){
    return <input value={this.props.value} onChange={event=>this.props.change(event.target.value)}/>
  }         // 注意这里的 value属性 不能是固定的值否则的话 他就一直是这个值 不会改变
}
// 怎样将值传递出去  props组件间通信
class Root extends React.Component{
  state={value:\'abc\'};

  handlerChange(val){
    this.setState({value:val});
  }
  render(){
    return (<div><h3>hello,world</h3>
          <InputComponent value={this.state.value} change={this.handlerChange.bind(this)}/>
          <span>{this.state.value}</span>
    </div>);
  }
}
ReactDOM.render(<Root/>,document.getElementById(\'root\'));

将span也封装成一个Component 也是通过props来传递属性的

class InputComponent extends React.Component {
  render(){
    return <input value={this.props.val} onChange={e=>this.props.change(e.target.value)}/>  // props可以传递的是函数
  }
}
class Label extends React.Component {
  render(){
      return <span>{this.props.val}</span>
  }
}
class Root extends React.Component {
  state={value:"abc"};

  handlerChange(val){
    this.setState({value:val});
  }
  render(){
    return (
        <div>
          <InputComponent val={this.state.value} change={this.handlerChange.bind(this)}/>
          <Label val={this.state.value}/>
        </div>
    );
  }
}
ReactDOM.render(<Root/>,document.getElementById(\'root\'));

7.props传递的值可以是任何东西，甚至是组件

class InputComponent extends React.Component{
  render(){
    return <input value={this.props.val} onChange={event=>this.props.change(event.target.value)}/>
  }
}
class Label extends React.Component {
  render(){
      return (<div><h2>{this.props.val}</h2><br/>
              {this.props.comp}
          </div>
      );
  }
}
class Root extends React.Component{
  state={value:\'abc\'};
  handlerChange(val){
    this.setState({value:val});
  }
  render(){
    return (<div>
          <InputComponent val={this.state.value} change={this.handlerChange.bind(this)}/>
          <Label val={this.state.value} comp={<InputComponent val={this.state.value} change={this.handlerChange.bind(this)}/>}/>
    </div>);// props传递的甚至可以是组件
  }
}
ReactDOM.render(<Root/>,document.getElementById(\'root\'));

8.props的特殊属性

class InputComponent extends React.Component{
  render(){
    return <input value={this.props.value} onChange={event=>this.props.onChange(event.target.value)}/>
  }
}
class ChildA extends React.Component{
    render(){
        return (<div>{`wang,${this.props.val}`}
                <h2>{this.props.children}</h2></div>
        );            // 特殊的props属性
    }
}
class Root extends React.Component{
  state={value:\'abc\'};
  handlerChange(val){
    this.setState({value:val});
  }
  render(){
    return (<div>
          <InputComponent value={this.state.value} onChange={this.handlerChange.bind(this)}/>
        <ChildA val={this.state.value}>
            <span>child 1</span>
            <span>child 2</span>
            <span>child 3</span>
        </ChildA>
    </div>);// props传递的甚至可以是组件
  }
}
ReactDOM.render(<Root/>,document.getElementById(\'root\'));

input的value属性不能是一个固定的值,否则他就一直不变了

class Root extends React.Component{
    state={value:"wang"};
    change(e){
        this.setState({value:e.target.value});
    }
    render(){
        return (<div>    //注意这里的value不能是一个固定的值
            <input value={this.state.value} onChange={this.change.bind(this)}/>
                <span>outer:{this.state.value}</span></div>)
    }
}
ReactDOM.render(<Root/>,document.getElementById(\'root\'));

9.无状态组件

react15才新引入无状态组件(也叫函数式组件) 因为大多数时候，组件是很简单的不需要状态

也不需要生命周期函数，而只需要一个render函数，于是无状态组件应运而生。

const Root1 = props=><div>hello,world</div>; //如果是多行用括号括起来

ReactDOM.render(<Root value="wanglei"/>, document.getElementById(\'root\'));

因为是一个函数，所以也就没有 this 写起来十分简单可以有 props

const Root = props=>(<div>hello,world <br/>
    <span>{props.value}</span></div>);

ReactDOM.render(<Root value="wanglei"/>, document.getElementById(\'root\'));

10.需求:给组件加一个隐藏的<div> 用高阶组件实现

class Root extends React.Component {
    render(){
        return (<div><div style={{display:\'none\'}}>hahaha</div>
            <h2>hello,world</h2></div>);
    }
}
ReactDOM.render(<Root />,document.getElementById(\'root\'));

11.如果要给每一个组件加上一个隐藏的div怎么实现使用高阶组件

接受一个component返回一个Component

const inject=function (Component) { // 接受一个Component,返回一个Component
    return class extends React.Component{
        render(){  //返回一个匿名的class
            return (
                <div>          // 注意这里是两个 大括号
                    <div style={{display:\'none\'}}>hello,world!</div>
                    <Component />  // 这个是传递进来的参数
                </div>
            );
        }
    }
};
class Root extends React.Component {
    render(){
        return (<div>
            <h2>hello,world</h2></div>)
    }
}
const _Root=inject(Root);
ReactDOM.render(<_Root />,document.getElementById(\'root\'));

12.高阶组件装饰器的写法

const inject=function (Component) {
    return class extends React.Component{
        render(){
            return (
                <div>
                    <div style={{display:\'none\'}}>hello,world!</div>
                    <Component />
                </div>
            );
        }
    }
};

@inject  // 很遗憾目前es只支持类装饰器  不支持普通函数的装饰器
class Root extends React.Component {
    render(){
        return (<div>
            <h2>hello,world</h2></div>)
    }
}
ReactDOM.render(<Root />,document.getElementById(\'root\'));

13.带参数的装饰器的写法

(1)不适用无状态组件的方式

const inject=id=>Comp=>class extends React.Component {
  render() {
      return (<div>
        <div style={{display:\'none\'}}>shadow{id}</div>
        <Comp />
      </div>);
  }
};
@inject(\'123456\')
class Root extends React.Component {
    render(){
        return (<div>
            <h2>hello,world</h2></div>)
    }
}
ReactDOM.render(<Root />,document.getElementById(\'root\'));

拆解该函数接受 id 作为参数返回接受组件作为参数的函数，作为组件作为参数的函数，返回一个包装后的组件

const inject=function (id) {
    return function (Comp) {
        return class extends React.Component {
          render(){
              return (<div>
                <div style={{display:\'none\'}}>shadow{id}</div>
                <Comp />
              </div>);
          }
        }
    }
};
@inject(\'123\')
class Root extends React.Component {
    render(){
        return (<div>
            <h2>hello,world</h2></div>)
    }
}
ReactDOM.render(<Root />,document.getElementById(\'root\'));

(2)使用无状态组件来重写该函数 (最后一步可以写成无状态组件的形式)

const inject=id=>Comp=>props=>{
    return (<div>
      <div style={{display:\'none\'}}>hello,{id}</div>
      <Comp />
    </div>)
};
@inject(\'1234\')
class Root extends React.Component {
    render(){
        return (<div>
            <h2>hello,world</h2></div>)
    }
}
ReactDOM.render(<Root />,document.getElementById(\'root\'));

14.解决传入的Component有属性的问题

const inject=id=>Comp=>props=>{
    return (<div>
      <div style={{display:\'none\'}}>hello,{id}</div>
      <Comp {...props}/>  //只需要在这里使用解构即可
    </div>)
};
@inject(\'1234\')
class Root extends React.Component {
    render(){
        return (<div>
            <h2>hello,{this.props.name}</h2></div>)
    }
}
ReactDOM.render(<Root name="wang"/>,document.getElementById(\'root\'));

15.组件的生命周期函数

class Root extends React.Component {
    state={value:0};
    render(){
        setInterval(()=>this.setState({value:this.state.value+1}),3000);
        return <App value={this.state.value}/>
    }
}
class App extends React.Component{
  componentWillMount(){ // 第一次render 之前执行  组件装载函数
      console.log("componentWillMount",new Date());
    }
  componentDidMount (){ // 第一次render之后执行
      console.log("componentDidMount",new Date());
      // 如果需要对真实DOM做一些操作，可以在这个函数里面执行
  }
  componentWillReceiveProps(props){
      this.props=props; //当props发生变更的时候执行  组件更新函数  用的比较多 在组件内部props是不可变的，但是在接收到新的props的时候，可以在这个函数做一些
      console.log("componentWillReceiveProps",new Date()); //预处理再绑定到props
  }
  shouldComponentUpdate(props,state){
      return true;//componentWillReceiveProps 之后         另一个执行时机是state发生改变的时候
  }
  componentWillUpdate(){ //除了首次render之外 每次render之前执行
      console.log("componentWillUpdate",new Date());
  }
  componentDidUpdate(){ //除了首次render之外 每次render之后执行
      console.log("componentWillUpdate",new Date());
  }
  componentWillUnmount(){  //卸载该组件的时候
      console.log("componentWillUnmount",new Date());
  }
  render(){
      console.log(\'render\');
      return (<h3>{this.props.value}</h3>);
  }
}
ReactDOM.render(<Root/>,document.getElementById(\'root\'));

以上是关于react笔记1的主要内容，如果未能解决你的问题，请参考以下文章

前端开发工具vscode如何快速生成代码片段

学习笔记：python3，代码片段（2017）

已解决在react+ts中 atnd 用 upload 组件报错Failed to execute ‘readAsArrayBuffer,param 1 is notof type Blob(代码片段

Reactreact概述组件事件