面试了许多求职者，很多求职者只知其然，而不知所以然，写此文章为广大前端小伙伴指引迷津。纯干货！纯干货！纯干货！

// 无状态组件: 通过JS函数创建。
function LearningList(props) {
  return (
    <div className="list">
      <h1>LearningList for {props.name}</h1>
      <ul>
        <li>Vue</li>
        <li>React</li>
        <li>Angular</li>
      </ul>
    </div>
  )
}
ReactDOM.render(<Welcome name="lzg" />, document.getElementById('app'))

// 有状态组件: 通过 class 创建。
class LearningList extends React.Component {
  constructor(props) {
    super(props)
  }
  // class创建的组件中 必须有render方法 且显示return一个react对象或者null
  render() {
    return (
      <div className="list">
        <h1>LearningList for {props.name}</h1>
        <ul>
          <li>Vue</li>
          <li>React</li>
          <li>Angular</li>
        </ul>
      </div>
    )
  }
}

条件渲染

两个组件二选一的渲染: if

一个组件有无的渲染: &&

列表循环

答：利用数组的遍历 map() 方法返回一个集合。

遍历时必须有唯一索引 key 提高遍历的效率。一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串，万不得已可以使用 index。

接收数据

答：组件之间进行传值props。

组件状态

答：如果需要定义组件的自定义属性，需要在组件的 constructor 构造函数里面去定义 state。

只有通过 class 创建的组件才具有 state
state 是私有的，完全由组件来控制
不要在 state 中添加 render() 方法中不需要的数据，会影响渲染性能！
不要在 render() 方法中调用 setState() 方法来修改 state 的值

state 和 props 的区别

props 是组件对外的接口，state 是组件对内的接口。两者主要的区别：state 是可变的，是组件内部维护的一组返回 ui 组件的集合，而 props 是组件的只读属性，组件内不能直接修改 props，只能在组件的上层修改。

创建state

如果需要定义组件的自定义属性，在组件的 constructor 构造函数里面去定义 state。

class Mycom extends React.Component {
  constructor(props) {
    super(props)
    //给this.state赋值一个对象，对象的属性就是组件的自定义属性
    this.state = {
      name: 'lzg',
    }
  }
}

修改state

不能直接去修改 state 的值，否则数据无法驱动关联，需要使用 setState。

// setState 方法接收一个参数，参数为一个对象
this.setState({ name: 'lzg' })

// 更新的 props 和状态是异步的。这里，我们根据这些 props 更新状态。
this.setState((state, props) => { total: state.total + props.count })

// setState 还可以接收第二个参数，第二个参数为一个回调函数
this.setState(
  {
    name: 'lzg',
  },
  () => {
    console.log('state值修改成功，现在的name值为' + this.state.name)
  }
)

事件绑定

// 1 在调用的时候使用 bind 绑定 this
class Foo extends React.Component {
  handleClick() {
    this.setState({ name: 'lzg' })
  }

  render() {
    return <button onClick={this.handleClick.bind(this)}>Click me</button>
  }
}

// 2 在构造函数中使用 bind 绑定 this
class Foo extends React.Component {
  constuctor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick() {
    this.setState({ name: 'lzg' })
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>
  }
}

// 3 使用箭头函数绑定 this
class Foo extends React.Component {
  handleClick() {
    this.setState({ name: 'lzg' })
  }

  render() {
    return <button onClick={(e) => this.handleClick(e)}>Click me</button>
  }
}

// 4 public class fields 型
class Foo extends React.Component {
  handleClick = () => {
    this.setState({ name: 'lzg' })
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>
  }
}

受控与非受控组件

受控组件：通过setState将输入的值维护到了state中，需要时再从state中取出，这里的数据就受到了state的控制。

非受控组件：所有输入类的DOM如果是现用现取。

ref

React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。

// ref 作为回调函数
class AutoFocusTextInput extends Component {
  componentDidMount(){
    this.textInput.focus();
  }
  render(){
    return (
      <Input ref={(input) => { this.textInput = input }}>
    )
  }
}

// React.createRef()
class Child extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = React.createRef()
  }
  componentDidMount() {
    console.log(this.myRef.current)
  }
  render() {
    return <input ref={this.myRef} />
  }
}

React系列-基础小结

目录

基础小结

组件创建