react笔记1

首页 > 代码库 > react笔记1

2024-09-21 09:10:01 202人阅读

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=http://www.mamicode.com/{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});

  }
  render(){
    return (<div><h3>hello,world</h3>
          <input value=http://www.mamicode.com/{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=http://www.mamicode.com/{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=http://www.mamicode.com/{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=http://www.mamicode.com/{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=http://www.mamicode.com/{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=http://www.mamicode.com/{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=http://www.mamicode.com/{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=http://www.mamicode.com/{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="http://www.mamicode.com/wanglei"/>, document.getElementById(‘root‘));

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

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

ReactDOM.render(<Root value="http://www.mamicode.com/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(){
            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=http://www.mamicode.com/{this.state.value}/>
    }
}
class App extends React.Component{
  componentWillMount(){ // 第一次render 之前执行
      console.log("componentWillMount",new Date());
    }
  componentDidMount (){ // 第一次render之后执行
      console.log("componentDidMount",new Date());
  }
  componentWillReceiveProps(props){
      this.props=props; //当props发生变更的时候执行
      console.log("componentWillReceiveProps",new Date());
  }
  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

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > react笔记1

react笔记1

看完仍有疑问？有类似问题直接问程序猿