【React】进阶React的重要知识点

1
class UserList extends Component {
2
  constructor(props) {
3
    super(props)
4
    this.state = {
5
      newUser: '',
6
    }
7
  }
8
  handleChange = (e) => {
9
    this.setState({
10
      newUser: e.target.value,
11
    })
12
  }
13
  handleClick = () => {
14
    if (this.state.newUser && this.state.newUser.length > 0) {
15
      this.props.onAddUser(this.state.newUser)
16
    }
17
  }
18
  render() {
19
    return (
20
      <div>
21
        <ul className="user-list">
22
          {this.props.users.map((user) => (
23
            <li key={user.id}>
24
              <span>{user.name}</span>
25
            </li>
26
          ))}
27
        </ul>
28
        <input
29
          onChange={this.handleChange}
30
          value={this.state.newUser}
31
        />
32
        <button onClick={this.handleClick}>add uesr</button>
33
      </div>
34
    )
35
  }
36
}

1
export default class UserListContainer extends Component {
2
  // 省略无关代码
3
  render() {
4
    return (
5
      <div>
6
        <h1>UserListContainer</h1>
7
      </div>
8
    )
9
  }
10
  componentDidMount() {
11
    fetch('/path/api').then((res) => {
12
      res.json().then((data) => {
13
        this.setState({
14
          users: data,
15
        })
16
      })
17
    })
18
  }
19
}

1
class UserListContainer extends Component {
2
  // 省略
3
  componentWillReceiveProps(nextProps) {
4
    if (nextProps.category !== this.props.category) {
5
      fetch(`/path/api?category=${nextProps.category}`).then((res) => {
6
        res.json().then((data) => {
7
          this.setState({
8
            users: data,
9
          })
10
        })
11
      })
12
    }
13
  }
14
}

1
this.setState({
2
  count: 1,
3
  title: 'React',
4
  success: true,
5
})

1
this.setState((preState) => ({
2
  books: preState.books.concat(['React Guide']),
3
}))

1
this.setState((preState) => ({
2
  books: [...preState.books, 'React Guide'],
3
}))

1
this.setState((preState) => ({
2
  books: preState.books.slice(1, 3),
3
}))

1
this.setState((preState) => ({
2
  books: preState.books.filter((item) => {
3
    return item !== 'React'
4
  }),
5
}))

1
this.setState((preState) => ({
2
  owner: Object.assign({}, preState.owner, { name: 'Jason' }),
3
}))

1
this.setState((preState) => ({
2
  owner: { ...preState.owner, name: 'Jason' },
3
}))

1
function withRef(WrappedComponent) {
2
  return class extends Component {
3
    someMehod = () => {
4
      this.wrappedInstance = this.someMethodInWrappedComponent()
5
    }
6
    render() {
7
      // 为被包装组件添加ref ， 从而获取该组件实例并赋值给this.wrappedInstance
8
      return (
9
        <WrappedComponent
10
          ref={(instance) => (this.wrappedInstance = instance)}
11
          {...this.props}
12
        />
13
      )
14
    }
15
  }
16
}

1
function withControlledState(WrappedComponent) {
2
  return class extends Component {
3
    constructor() {
4
      super()
5
      this.state = {
6
        value: '',
7
      }
8
    }
9
    handleValueChange = (e) => {
10
      this.setState({
11
        value: e.target.value,
12
      })
13
    }
14
    render() {
15
      // newProps保存受控组件需要使用的属性和事件处理函数
16
      const newProps = {
17
        controlledProps: {
18
          value: this.state.value,
19
          onChange: this.handleValueChange,
20
        },
21
      }
22
      return (
23
        <WrappedComponent
24
          {...this.props}
25
          {...newProps}
26
        />
27
      )
28
    }
29
  }
30
}

1
class SimpleControlledComponent extends Component {
2
  render() {
3
    // 此时的SimpleControlledComponent 为无状态组件，状态由高阶组件维护
4
    return (
5
      <input
6
        nmae="simple"
7
        {...this.props.controlledProps}
8
      />
9
    )
10
  }
11
}
12
const ComponentWithControlledState = withControlledState(
13
  SimpleControlledComponent
14
)

1
function withRedBackground(WrappedComponent) {
2
  return class extends Component {
3
    render() {
4
      return (
5
        <div style={{ backgroundColor: 'red' }}>
6
          <WrappedComponent {...this.props} />
7
        </div>
8
      )
9
    }
10
  }
11
}

1
function withPersistentData(WrappedComponent, key) {
2
  return class extends Component {
3
    componentWillMount() {
4
      let data = localStorage.getItem(key)
5
      this.setState({
6
        [`local/${key}`]: data,
7
      })
8
    }
9
    render() {
10
      // 通过{...this.props}把传递给当前组件的属性继续传递给被包装的组件
11
      return (
12
        <WrappedComponent
13
          data={this.state.data}
14
          {...this.props}
15
        />
16
      )
17
    }
18
  }
19
}

1
const withPersistentData = (key) => (WrappedCompnent) => {
2
  return class extends Component {
3
    componentWillMount() {
4
      let data = localStorage.getItem(key)
5
      this.setState({ data })
6
    }
7
    render() {
8
      // 通过 {...this.props} 把传递给当前组件的属性继续传递给被包装的组件
9
      return (
10
        <WrappedComponent
11
          data={this.state.data}
12
          {...this.props}
13
        />
14
      )
15
    }
16
  }
17
}
18
class MyComponent extends Component {
19
  render() {
20
    return <div>{this.props.data}</div>
21
  }
22
}
23
// 获取key='data'的数据
24
const MyComponentPersistentData = withPersistentData('data')(MyCompoent)

1
// connect是一个函数，返回值 enhance也是一个函数
2
const enhance = connect(mapState, mapDispatch)
3
// enhance是一个高阶组件
4
const ConnectedComponentA = enhance(ComponentA)

1
// connect的参数是可选参数，这里省略了mapDispatch参数
2
const ConnectedComponentA = connect(mapStateToProps)(withLog(ComponentA))

1
function compose(...fns) {
2
  if (fns.length === 0) return arg => arg
3
  if (fns.length === 1) return fns[0]
4
  return fns.reduce((acc, cur) => (...args) => acc(cur(args)))

1
const enhance = compose(connect(mapState), withLog())
2
const ConnectedComponentA = enhance(ComponentA)

1
function withAuth(WrappedComponent) {
2
  return class extends WrappedComponent {
3
    render() {
4
      if (this.props.loggedIn) {
5
        return super.render()
6
      } else {
7
        return null
8
      }
9
    }
10
  }
11
}

1
function withPersistentData(WrappedComponent) {
2
  return class extends Component {
3
    // 结合被包装组件的名称，自定义高阶组件的名称
4
    static displayName = `HOC(${getDisplayName(WrappedComponent)})`
5
    render() {
6
      return // 省略
7
    }
8
  }
9
}
10

11
function getDisplayName(WrappedComponent) {
12
  return WrappedComponent.displayName || WrappedComponent.name || 'Component'
13
}

1
render() {
2
  // 每次render, enhance都会创建一个新租金啊，尽管被包装的组件没有变
3
  const EnhancedComponent = enhance(MyComponent)
4
  // 因为是新的组件，所以会经历旧组件的卸载和新组件的重新挂载
5
  return <EnhancedComopnent />
6
}

1
// WrappedComponent组件定义了一个静态方法staticMethod
2
WrappedComponent.staticMethod = function () {
3
  // ...
4
}
5
function withHOC(WrappedComponent) {
6
  class Enhance extends Component {
7
    // ...
8
  }
9
  // 手动复制静态方法到Enhance上
10
  Enhance.staticMethod = WrappedComponent.staticMethod
11
}

1
function FocusInput({ inputRef, ...rest }) {
2
  // 使用高阶组件传递的inputRef作为ref的值
3
  return (
4
    <input
5
      ref={inputRef}
6
      {...rest}
7
    />
8
  )
9
}
10
// enhance是一个高阶组件
11
const EnhanceInput = enhance(FocusInput)
12
// 在一个组件的render方法中，自定义属性inputRef代替ref
13
// 保证inputRef可以传递给被包装组件
14
return <EnhanceInput inputRef={(input) => (this.input = input)} />
15
// 组件内 让FocusInput自动获取焦点
16
this.input.focus()