编者语:新年了,2016年又是一个新的开始。
今天和大家说说React的一些基础。
1. JSX
这是一个把XML混在JavaScript 的一种方式。Facebook相信这种方式令标签语言和JS代码更佳紧凑。在React构件页面时,是以组件(Component)的方式存在的,通过组件构件的页面元素就是通过JSX的方式完成。在React中你不一定要用JSX,但是这是令人痛苦的决定。因为每一个页面元素都必须通过React.createElement的方式创建,而JSX就更像嵌入HTML语言,很方便。
举个例子吧,如果我们需要构建一个这样的页面,使用JSX会更方便,而且和写HTML基本一致的。
需要注意的地方
a. 建议大家在写JSX时先把基本效果在纯净态页面下写好,这样会事半功倍
b. 引入页面css的class时,class是JSX的保留字段,所以class的名字是className.
c. 结合TypeScript写JSX时,暂时没有智能提示和相应的插件,这个比较头痛的,但习惯了就好
2. Props 和 State
State - 页面发生交互时,会产生数据的变化,这个时候就需要State去更新页面的组件。
Props-简单来说就是渲染页面动态数据的。例如绑定动态内容等。
在TypeScript中如何实现呢?这里必须要看看react.d.ts。
这里就可以看到,当我们使用React.Component时必须要把你的Props和State定义好带进去。我一般定义的习惯如下:
注意事项
a. 如上图,你构建的Order组件,必须是tsx为后序,否则你是不可能用TS编译它,
b. 在构造函数中需要带上以Props相关的参数,而State是不需要的
3. 运行周期
你必须熟悉React的生命周期,如下图:
这里要切记,你的State变化后必须在componentDidMount方法,也只有在这个方法里触发Re-render,大家可以参照下面的方法做一个测试,在Chrome的控制台就可以看到执行的顺序了。
/// <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();今天就说到这里,如果大家有问题,可以留言给我。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。