React with TypeScript 系列(二) --基础篇
编者语:新年了,2016年又是一个新的开始。 今天和大家说说React的一些基础。 1. JSX 需要注意的地方 b. 引入页面css的class时,class是JSX的保留字段,所以class的名字是className. c. 结合TypeScript写JSX时,暂时没有智能提示和相应的插件,这个比较头痛的,但习惯了就好 State - 页面发生交互时,会产生数据的变化,这个时候就需要State去更新页面的组件。 Props-简单来说就是渲染页面动态数据的。例如绑定动态内容等。 在TypeScript中如何实现呢?这里必须要看看react.d.ts。 这里就可以看到,当我们使用React.Component时必须要把你的Props和State定义好带进去。我一般定义的习惯如下: b. 在构造函数中需要带上以Props相关的参数,而State是不需要的 3. 运行周期 你必须熟悉React的生命周期,如下图: /// <reference path="typings/react/react-global.d.ts" /> interface ReactProps { elapsed : any; } interface ReactState { list : any ; } function ChangeState(): ReactState { return { list: [] }; } class Hi extends React.Component<ReactProps,ReactState> { public state : ReactState ; constructor(props : ReactProps){ super(props); } public componentWillMount(){ console.log('componentWillMount'); } public componentDidMount(){ console.log('componentDidMount'); this.setState(ChangeState()); } public render(){ console.log('render'); var elapsed = Math.round(this.props.elapsed / 100); return <div>{elapsed}</div>; } } function render(){ ReactDOM.render( <Hi elapsed = {100} />,document.getElementById('container') ); } render();今天就说到这里,如果大家有问题,可以留言给我。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |