react函数组件写法
一：class方法调用当前实例的方法
1.方法写成普通函数，在onClick后绑定this也就是bind(this)
class App extends React.Component<Props, State> {
  x() {
    console.log('ccc')
  }
  render() {
    return (
      <div>
        <button onClick={bind(this)}></button>
      </div>
    )
  }
}
2.方法等于一个箭头函数
class App extends React.Component<Props, State> {
  x= () => {
    console.log('ccc')
  }
  render() {
    return (
      <div>
        <button onClick={this.x}></button>
      </div>
    )
  }
}
通常情况下我们用第二种，但是第二种有一个缺陷：我们的方法写成普通函数的情况下，这个方法是绑定在当前实例的原型上的，所有实例公用一个方法，而我们写成等于一个箭头函数它就是就相当于在构造函数内部生成了一个私有的x方法，像下边这样
constructor(props) {
    this.x = () => {}
  }
只要有一个实例就会有一个x方法，所以它的缺点就是浪费内存，解决方法：无解
二：在js里指定props里的参数和类型安装prop-types
import PropTypes from "prop-types";
class App extends React.Component<Props, State> {
  // 默认的prop类型为message为字符串
  static propTypes = {
    message: PropTypes.string
  }
}
react函数组件写法 2
直接在属性前面写一个get就是获取当前属性也就是计算属性
interface State {
  firstName: string;
  lastName: string;
}
class App extends React.Component<Props, State> {
  constructor(props) {
    super(props)
    this.state = {
      firstName: 'Wang',
      lastName: 'lifa'
    }
  }
  get name() {
    return this.state.firstName + this.state.lastName
  }
  render() {
    return (
      <div>
        {this.name}
      </div>
    );
  }
}
函数组件
一. 在函数组件里使用生命周期我们需要使用useEffect api
const App: React.FunctionComponent<Props> = props => {
  const [n, setN] = useState(1);
  const x = () => {
    setN(n + 1);
  };
  useEffect(() => {
    console.log("aaa");
  });
  return (
    <div>
      <h1>{ssage}</h1>
      <div>{n}</div>
      <button onClick={x}>+1</button>
    </div>
  );
};
只要有数据更新就会触发这个api，如果我们想针对某一个数据的改变才调用这个api，那么需要在后面指定一个数组，数组里面是需要更新的那个值，它变了就会触发这个api
useEffect(() => {
    console.log("aaa");
  }, [n]);
只有在n改变的时候才会触发
如果我们想只在mounted的时候触发一次，那我们需要指定后面的为空数组，那么就只会触发一次，适合我们做ajax请求
useEffect(() => {
    console.log("mounted");
  }, []);
如果想在组件销毁之前执行，那么我们就需要在useEffect里return 一个函数
useEffect(() => {
    console.log("mounted");
    return () => {
      console.log('我死了')
    }
  }, []);
二：设置默认名字和默认props的操作以及参数检查
1.设置默认props
// 设置message为可选参数
interface Props {
  message?: string;
}
// 设置默认的message为default message
react组件之间通信
App.defaultProps = {
  message: "default message"
};
der(<App />, rootElement);
问题：因为我们的message为可选参数所以可能即使我们通过js的方式指定了默认的message，但是ts还是会认为你没有message，所以如果我们直接在方法里对ssage进行操作有可能会报错解决方法：对message做非空断言，不让ts去管它
const App: React.FunctionComponent<Props> = props => {
  ssage!.split('')
}
2.设置默认的组件名
App.displayName = "Lifa";
3.通过js设置默认的props类型
import PropTypes from "prop-types";

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。