React 学习笔记 Part II

b站课程链接跳转

ps： written by Winter-prince

学习前端React做的笔记，供以后复习使用。关键代码基本上都有截图和文字说明，有些部分可能由于内容比较简单没有记录，点击上方课程链接即可跳转前往课程查看详情，关于React的笔记一共有5篇博客，如果需要查看完整内容的请前往专栏查看

我的github：Winter-prince

P21-40

P21 批量传递props

展开运算符 （…）

reduce函数，求和

let arr1 = [1, 3, 5, 7, 9];
let arr2 = [2, 4, 6, 8, 10];
console.log(...arr1); //展开-一个数组
let arr3 = [...arr1, ...arr2]; //连接数组
function sum(...numbers) {
  return numbers.reduce((preValue, currentValue) => {
    return preValue + currentValue;
  });
}
console.log(sum(1, 2, 3, 4));

mdn

babel和react允许 …对象 语法

P22 对props对进行类型限制

引入prop-types.js包

//对标签属性进行类型、必要性的限制
Person.propTypes = {
  name: PropTypes.string.isRequired, // 限制name必传，且为字符串
  sex: PropTypes.string, //限制sex为字符串
  age: PropTypes.number, //限制age为数值
  speak: PropTypes.func, //限制speak为函数
};
//指定默认标签属性值
Person.defaultProps = {
  sex: "男", //sex默认值为男
  age: 18, //age默认值为18
};

P23 props简写

props是只读的

将限制设置为静态成员

class Person extends React.Component {
  //对标签属性进行类型、必要性的限制
  static propTypes = {
    name: PropTypes.string.isRequired, //限制nal
    sex: PropTypes.string, //限制sex为字符串
    age: PropTypes.number, //限制age为数值
    speak: PropTypes.func, //限制speak为函数
  };
  //指定默认标签属性值
  static defaultProps = {
    sex: "男", //sex默认值为男
    age: 18, //age默认值为18
  };
  render() {}
}

P24 类式组件构造器和props

构造器主要两种用途：

1.初始化state

2.为时间处理函数绑定方法

在子类中简写：

state={}
demo = ()=>{
    //函数体
}

类中的构造器能省略就省略。

P25 函数式组件使用props

函数式组件可以使用props，但无法使用state和refs，后续有hooks

function Person(props) {
  const { name, age, sex } = props;
  return (
    <ul>
      <li>姓名: {name}</li>
      <li>性别: {sex}</li>
      <li>
        年龄:
        {age}
      </li>
    </ul>
  );
}

函数式组件可以在函数外部使用如下方法实现限制（大小写要注意）

Person.propTypes = {
  name: PropTypes.string.isRequired, // 限制name必传，且为字符串
  sex: PropTypes.string, //限制sex为字符串
  age: PropTypes.number, //限制age为数值
};
//指定默认标签属性值
Person.defaultProps = {
  sex: "男", //sex默认值为男
  age: 18, //age默认值为18
};

P26 props总结

见课程相关资料

P27字符串形式的ref

//创建组件
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="点击按钮提示数据" />
        &nbsp;
        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
        <input
          ref="input2"
          onBlur={this.showData2}
          type="text"
          placeholder="失去焦点提示数"
        />
      </div>
    );
  }
}

P28回调形式的ref

P29回调ref调用次数的问题

组件更新时，内联方式会调用两次，但是很多时候这无关紧要

并且通常开发的时候还是写箭头函数的

P30 createRef的使用

P31总结ref

1.字符串形式

2.ref形式

3.createRef形式

P32 react中的事件处理

图中情况可以使用事件委托的方式实现，可以避免使用refs

P33非受控组件

收集表单数据

非受控——现用现取

P34 受控组件

受控组件——随着输入更改状态，能够省略掉refs

  //保存用户名到状态中
  saveUsername = (event) => {
    this.setState({ username: event.target.value });
  };
  //保存密码到状态中
  savePassword = (event) => {
    this.setState({ password: event.target.value });
  };
  //表单提交的回调
  handleSubmit = (event) => {
    event.preventDefault(); //阻止表单提交
    const { username, password } = this.state;
    alert(`你输入的用户名是: ${username}, 你输入的密码是: ${password}`);
  };
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        用户名:{" "}
        <input onChange={this.saveUsername} type="text" name="username" />
        密码:{" "}
        <input onChange={this.savePassword} type=" password" name="password" />
        <button>登录</button>
      </form>
    );
  }

P35 函数科里化

函数连续调用

P36不用科里化的写法

  //保存表单数据到状态中
  saveFormData = (dataType, event) => {
    this.setState({ [dataType]: event.target.value });
  };
  //表单提交的回调
  handleSubmit = (event) => {
    event.preventDefault(); //阻止表单提交
    const { username, password } = this.state;
    alert(`你输入的用户名是: ${username}, 你输入的密码是: ${password}`);
  };
  render() {
    return (
      <form onSubmit={this.handlesubmit}>
        用户名:
        <input
          onChange={(event) => this.saveFormData("username", event)}
          type="text"
          name="username"
        />
        密码:
        <input
          onChange={(event) => this.saveFormData("password", event)}
          type=" password"
          name="password"
        />
        <button>登录</button>
      </form>
    );
  }

P37 生命周期

定时器不合适

render调用时机：初始化渲染、状态更新之后

componentDidMount()调用时机：组件挂载完毕

清除计时器

P38 生命周期 组件挂载流程

P39 生命周期 setState流程

P40 forceUpdate流程

略