useState

import React, { useState } from "react";
function App() {
  const [obj, setObject] = useState({
    count: 0,
    name: "alife"
  });
  return (
    <div className="App">
      Count: {obj.count}
      <button onClick={() => setObject({ ...obj, count: obj.count + 1 })}>+</button>
      <button onClick={() => setObject({ ...obj, count: obj.count - 1 })}>-</button>
    </div>
  );

useEffect

import React, { useState, useEffect } from "react";
let timer = null;
function App() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = "componentDidMount" + count;
  },[count]);
 
  useEffect(() => {
    timer = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);
    return () => {
      document.title = "componentWillUnmount";
      clearInterval(timer);
    };
  }, []);
  return (
    <div>
      Count: {count}
      <button onClick={() => clearInterval(timer)}>clear</button>
    </div>
  );
}

useContext 减少组件层级

const colorContext = React.createContext("gray");
function Bar() {
  const color = useContext(colorContext);
  return <div>{color}</div>;
}
function Foo() {
  return <Bar />;
}
function App() {
  return (
    <colorContext.Provider value={"red"}>
      <Foo />
    </colorContext.Provider>
  );
}

useMemo 先看一个例子

export default class a extends React.Component {
    state = {
        num: 1
    }
    handleClick = () => {
        const { num } = this.state;
        this.setState({
            num: num + 1
        })
    }
    handTestClick = () => {

    }
    renderTest = () => {
        console.log('函数组件渲染')
        return (
            <Text>
                function Children
             </Text>
        )
    }
    render() {
        const { num } = this.state;
        return (
            <View style={{ display: "flex", justifyContent: "center", alignItems: "center", flex: 1 }}>
                <TouchableOpacity style={{ color: "#333", fontSize: 20 }} onPress={this.handleClick}>
                    <Text>{num}</Text>
                </TouchableOpacity>
                {this.renderTest()}
                <Test onClick={this.handTestClick} />
            </View>
        )
    }
}

image.png

import React, {useMemo, useState, useCallback ,useEffect} from 'react';
import {
    Text,
    View,
    TouchableOpacity
} from 'react-native';
import Test from './components/Test'

export default () => {
    const [num, useNum] = useState(1)
    const handleClick = () => {
        useNum(num + 1)
    }
    const handTestClick = () => {

    }

    const renderTest = useMemo(() => {
        console.log('函数组件渲染')
        return (
            <Text>
                function Children
             </Text>
        )
    },[])

    return (
        <View style={{ display: "flex", justifyContent: "center", alignItems: "center", flex: 1 }}>
            <TouchableOpacity style={{ color: "#333", fontSize: 20 }} onPress={handleClick}>
                <Text>{num}</Text>
            </TouchableOpacity>
            {renderTest}
            <Test onClick={handTestClick} />
        </View>
    )

}

Capture Value 特性
看一个类组件

import React, { useEffect, useState } from 'react';
import {
  Button,
  TextInput
} from 'react-native';


export default class a extends React.Component {
  state={
    message:''
  }
  showMessage = () => {
    const { message } = this.state
    alert("You said: " + message);
  };
  handleMessageChange = e => {
    this.setState({
      message: e
    })
  };
  handleSendClick = () => {
 
    setTimeout(this.showMessage, 3000);
  };
  render() {
    const { message } = this.state;
    return (
      <>
        <TextInput style={{ height: 40, width: 200 }} value={message} onChangeText={this.handleMessageChange} />
        <Button
          onPress={this.handleSendClick}
          title='Send'
        />
      </>
    );
  }
}

先点击Send 按钮后，再次修改输入框的值，3 秒后的输出的结果是期望值，因为这时候 message 是挂载在 this 变量上，它保留的是一个引用值，对 this 属性的访问都会获取到最新的值

image.png

看下函数式组件

export default function(props) {

    const [message, setMessage] = useState('');

    const showMessage = () => {
      alert("You said: " + message);
    };

    const handleSendClick = () => {
      setTimeout(showMessage, 3000);
    };

    const handleMessageChange = e => {
      console.log(e)
      setMessage(e);
    };

    return (
      <>
        <TextInput style={{height:40,width:200}} value={message} onChangeText={handleMessageChange} />
        <Button
         onPress={handleSendClick}
         title='Send'
        />
      </>
    );
  }

image.png

export default function (props) {
  const latestMessage = useRef();
  const [message, setMessage] = useState('');

  const showMessage = () => {
    console.log(latestMessage)
    const { props:{value} } = latestMessage.current
    alert("You said: " + value);
  };

  const handleSendClick = () => {
    setTimeout(showMessage, 3000);
  };

  const handleMessageChange = e => {
    console.log(e)
    setMessage(e);
  };

  return (
    <>
      <TextInput ref={latestMessage} style={{ height: 40, width: 200 }} value={message} onChangeText={handleMessageChange} />
      <Button
        onPress={handleSendClick}
        title='Send'
      />
    </>
  );
}

image.png

React .forwardRef
React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。这种技术并不常见，但在以下两种场景中特别有用：

• 转发 refs 到 DOM 组件
• 在高阶组件中转发 refs

React.forwardRef 接受渲染函数作为参数。React 将使用 props 和 ref 作为参数来调用此函数。此函数应返回 React 节点。