129_React笔记3_props和states

最新推荐文章于 2022-12-14 16:14:39 发布

✅_蜡笔小新_✅

最新推荐文章于 2022-12-14 16:14:39 发布

阅读量173

点赞数

本文链接：https://blog.csdn.net/a_horse/article/details/85156935

版权

可以参考RN里的笔记：https://blog.csdn.net/a_horse/article/details/82628315

一，props

不可改变，初始化参数使用

//props基本使用
function HelloMessage(props) {
    return <h1>Hello {props.name}!</h1>;
}
 
const element = <HelloMessage name="Runoob"/>;
 
ReactDOM.render(
    element,
    document.getElementById('example')
);

默认参数

方法1：在组件内部的使用static defaultProps
方法2：在组件外部，使用组件名.defaultProps
示例

class HelloMessage extends React.Component {

//默认属性方法1
 static defaultProps = { 
      name: "菜鸟教程"}

  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}
 
//默认属性方法2
HelloMessage.defaultProps = {
  name: 'Runoob'
};
 
const element = <HelloMessage/>;
 
ReactDOM.render(
  element,
  document.getElementById('example')
);

prop验证

使用propTypes，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效
当向 props 传入无效数据时，JavaScript 控制台会抛出警告。

示例：

var title = "菜鸟教程";
// var title = 123;
class MyTitle extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.title}</h1>
    );
  }
}
 // 验证title参数必须是字符串类型
MyTitle.propTypes = {
  title: PropTypes.string
};
ReactDOM.render(
    <MyTitle title={title} />,
    document.getElementById('example')
);

二，states

状态机制，更新时使用
配合组件的生命周期，事件的触发来使用

更新状态使用setState

// ❎错误
this.state.comment = 'Hello';

// ✅正确
this.setState({comment: 'Hello'});

状态更新可能是异步的

this.props 和 this.state 可能是异步更新的，你不应该依靠它们的值来计算下一个状态
应该setState() 来接受一个函数而不是一个对象。该函数将接收先前的状态作为第一个参数，将此次更新被应用时的props做为第二个参数

例子：

// ❎错误
this.setState({
  counter: this.state.counter + this.props.increment,
});

// ✅正确
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

上方代码使用了箭头函数，但它也适用于常规函数：
// ✅正确
this.setState(function(prevState, props) {
  return {
    counter: prevState.counter + props.increment
  };
});

状态单独更新

  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }

你可以调用 setState() 独立地更新它们：
  componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

数据自顶向下流动

状态通常被称为局部或封装。除了拥有并设置它的组件外，其它组件不可访问。

子组件

<h2>It is {this.state.date.toLocaleTimeString()}.</h2>

用户组件

<FormattedDate date={this.state.date} />


function FormattedDate(props) {
  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}