• props来进行父子组件传参

  • 父组件调用子组件时传入属性

    1. 子组件直接通过 this.props.属性名 拿到父组件传过来的值

  • 在父组件里定义一个函数，调用子组件时将函数传过去

    1. 子组件通过 this.props.函数名() 来调用函数并且执行
    2. prop-types 对父级传参进行验证

props默认参数

  1. 设置静态属性 static defaultProps，默认的 props参数
  2. 只能在 class组件中设置
  1. class MyDemo extends React.PureComponent{
  2.   constructor(props){
  3.     super(props)
  4.   }
  6.   //如果babel设置为es6的转码方式会报错，ES6的class中只有静态方法，没有静态属性。
  7.   // 因为定义静态属性不属于es6，而在es7的草案中。
  8.   static defaultProps = { // props 默认值
  9.     user:"默认值"
  10.   }
  12.     static propTypes = {
  13.       name: PropTypes.string
  14.   }
  16.   render(){
  17.     return <h1>This is {this.props.name}</h1>
  18.   }
  19. }

props.children

this.props.children属性。表示组件的所有子节点

React.Children 来处理 this.props.children

  1. React.Children.map 来遍历子节点
  2. 不用担心 this.props.children的数据类型是 undefined 还是 object
    ```jsx function App(props) { return (
    {props.children}
    ) }

// 在 App组件中可以通过 this.props.children来获取 Link

UI 

  3. children的属性写法
  4. ```jsx
  5. function App(props) {
  6.     return (
  7.       <div children={<>label:<p>{props.label}<p></>} />
  8.   )
  9. }

react怎么发现props改变？

props来自组件外部，react怎么发现props改变了？

props变化了，不是当前组件发现的，是父级组件通知的

  1. props代表了react的单向数据流特性，由父级组件传入


react没有监听props的变化，而是父组件内的一些数据发生了变化

  1. 比如父组件的 state发生了变化引起重新render，那么就会重新渲染子组件
  2. react中能够触发重新渲染的只有setState，使用了props，说明你使用了“存在父子关系的组件”

类组件中，只要调用setState就会触发render

  1. 父组件state改变时，如果子组件接受的参数并没有变化，那么子组件是不会重新渲染的
  2. 子组件根本没有接收参数，自然也不会产生性能优化问题；
    1. 所以，子组件传值，不要多传值，不然只要这个值改变就会触发重新渲染
    2. 在传递props/state时，只传递需要的参数
  3. 子组件通过 componentWillReceiveProps 生命周期方法，将接收的 props转换为子组件的 state，不推荐使用

props 也是js的一个对象，一部分是原型链上的或者通过 javascript语法增加的

  1. Route路由组件给你新增 props
  2. redux的 mapStateToProps也可以新增 props
  3. 通过mapStateToProps，connect给你的组件添加了你需要的数据（即组件的props）

setState

父组件中调用setState，会引起子组件的更新；这个更新从表象和直观上看貌似是props带来的

  1. 实际上是因为父组件中调用了setState；react中能够触发重新渲染的只有setState
  2. 父组件re-render之后，会递归的对子组件进行re-render
  3. 即state变更的父组件会通知子组件


组件节点是树状结构，一个组件的 state变化会带动所有子组件重新render

  1. 所以才有shouldcomponentupdate的优化点
  2. hooks函数组件是 memo优化
  3. setState 触发更新，不简单的就是把 state 的值给更新了。而是会触发 render
  4. 一旦触发 render，所有的子组件都会 shouldComponentUpdate，然后才会去更新 props

react的state变化是通过setState()通知的，re-render重新渲染流程

  1. setState之后，会把当前的component组件放到 dirtyComponents = []
  2. 在batchUpateTransaction的close阶段，遍历dirtyComponents
  3. 对状态发生改变的Component进行update，该Component执行render方法，可以得到renderedElement
  4. 然后renderedElement进行递归的update
  5. 这样子组件就会re-render，根据当前的props得到新的markup，这样整个虚拟DOM树就进行了更新


setState的用法
使用以前一个之前的状态（prevState）作为第一个参数的回调避免 eslint报错

  1. this.setState(prev => ({ visible: !prev.visible }))
  3. this.setState(prevState => ({value: prevState.value + 1}))