react 是 R 系技术栈中最基础同时也是最核心的一环,2 年不到获取了 62.5k star(截止到目前),足可见其给力程度。下面对一些 react 日常开发中的注意事项进行罗列。
react 主要思想是构建可复用组件来构建用户界面。在 react 里面一切皆组件。每个组件里面都是有自己的生命周期,这个生命周期规定了组件的状态和方法,分别在哪个阶段执行。下面附上一张 RN 的生命周期图:
组件第一阶段:初始化、渲染以及装载完成;
组件第二阶段:组件运行时候的状态 ①: 状态变化引发组件的更新和重新渲染到更新完成
②: 父组件属性变化引发组件的更新 (是常见的组件之间传递数据和同步状态的手段): 比如父组件登录了,子组件也需变成登录状态
组件第三阶段:卸载组件
- const names = ['Alice', 'Emily', 'Kate'];
- ReactDOM.render(
- {
- names.map((name) = >{
- return Hello,
- {
- name
- } !
- })
- },
- document.getElementById('example'));
所以给 jsx 添加注释只要这样子:
- {
- /* 。。。 */
- }
- 子:
- var HelloMessage = React.createClass({
- render: function() {
- return
- Hello {
- this.props.name};
- }
- });
- ---------------------------------------
- 父:
- ReactDOM.render(
- ,
- document.getElementById('example')
- );
变量
就是相当于一个子组件类。通过 this.props.name 获取到了 Muyy。
- HelloMessage
另外注意
方法,用于输出组件。
- render
不能写成
- HelloMessage
- helloMessage
属性需要写成
- class
,
- className
属性需要写成
- for
,这是因为
- htmlFor
和
- class
是 JavaScript 的保留字
- for
其实很简单,概括起来就是:react 中 state 改变了,组件才会 update。父组件写好 state 和处理该 state 的函数,同时将函数名通过 props 属性值的形式传入子,子调用父的函数,同时引起 state 变化。
例子 1. 这里如下图,用户邮箱为父,绿色框为子。 父组件为用户输入的邮箱设好 state,即 "{email:''}",同时写好处理 state 的函数,即 "handleEmail",这两个名称随意起;再将函数以 props 的形式传到子组件,子组件只需在事件发生时,调用父组件传过来的函数即可。
demo1
- 1 //子组件
- 2
- var Child = React.createClass({
- 3 render: function() {
- 4
- return (5 6请输入邮箱:this.props.handleEmail
- }
- />
- 7
- 8 )
- 9 }
- 10 });
- 11 / / 父组件,此处通过event.target.value获取子组件的值12
- var Parent = React.createClass({
- 13 getInitialState: function() {
- 14
- return {
- 15 email: ''16
- }
- 17
- },
- 18 handleEmail: function(event) {
- 19 this.setState({
- email: event.target.value
- });
- 20
- },
- 21 render: function() {
- 22
- return (23 24用户邮箱: {
- this.state.email
- }
- 25 this.handleEmail.bind(this)
- }
- />
- 26
- 27 )
- 28 }
- 29 });
- 30 React.render(
- 31 ,
- 32 document.getElementById('test')
- 33 );/
例子 2. 有时候往往需要对数据做处理,再传给父组件,比如过滤或者自动补全等等,下面的例子对用户输入的邮箱做简单验证,自动过滤非数字、字母和 "@." 以外的字符。
demo2
- 1 //子组件,handleVal函数处理用户输入的字符,再传给父组件的handelEmail函数
- 2
- var Child = React.createClass({
- 3 handleVal: function() {
- 4
- var val = this.refs.emailDom.value;
- 5 val = val.replace(/[^0-9|a-z|\@|\.]/ig, "");
- 6 this.props.handleEmail(val);
- 7
- },
- 8 render: function() {
- 9
- return (10 11请输入邮箱:this.handleVal
- }
- />
- 12
- 13 )
- 14 }
- 15 });
- 16 / / 父组件,通过handleEmail接受到的参数,即子组件的值17
- var Parent = React.createClass({
- 18 getInitialState: function() {
- 19
- return {
- 20 email: ''21
- }
- 22
- },
- 23 handleEmail: function(val) {
- 24 this.setState({
- email: val
- });
- 25
- },
- 26 render: function() {
- 27
- return (28 29用户邮箱: {
- this.state.email
- }
- 30 this.handleEmail.bind(this)
- }
- />
- 31
- 32 )
- 33 }
- 34 });
- 35 React.render(
- 36 ,
- 37 document.getElementById('test')
- 38 );/
例子 3. 如果还存在孙子组件的情况呢?如下图,黑框为父,绿框为子,红框为孙,要求子孙的数据都传给爷爷。原理一样的,只是父要将爷爷对孙子的处理函数直接传下去。
demo3
- 1 //孙子,将下拉选项的值传给爷爷
- 2
- var Grandson = React.createClass({
- 3 render: function() {
- 4
- return (5性别:6 this.props.handleSelect
- } > 7男8女9 10 11) 12
- }
- 13
- });
- 14 //子,将用户输入的姓名传给爹
- 15 //对于孙子的处理函数,父只需用props传下去即可
- 16
- var Child = React.createClass({
- 17 render: function() {
- 18
- return (19 20姓名:this.props.handleVal
- }
- />
- 21 this.props.handleSelect}/ > 22 23) 24
- }
- 25
- });26 //父组件,准备了两个state,username和sex用来接收子孙传过来的值,对应两个函数handleVal和handleSelect
- 27
- var Parent = React.createClass({
- 28 getInitialState: function() {
- 29
- return {
- 30 username: '',
- 31 sex: ''32
- }
- 33
- },
- 34 handleVal: function(event) {
- 35 this.setState({
- username: event.target.value
- });
- 36
- },
- 37 handleSelect: function(event) {
- 38 this.setState({
- sex: event.target.value
- });
- 39
- },
- 40 render: function() {
- 41
- return (42 43用户姓名: {
- this.state.username
- }
- 44用户性别: {
- this.state.sex
- }
- 45 this.handleVal.bind(this)
- }
- handleSelect = {
- this.handleSelect.bind(this)
- }
- />
- 46
- 47 )
- 48 }
- 49 });
- 50 React.render(
- 51 ,
- 52 document.getElementById('test')
- 53 );/
方法可以用来设置组件属性的默认值
- getDefaultProps
- var MyTitle = React.createClass({
- getDefaultProps : function () {
- return {
- title : 'Hello World'
- };
- },
- render: function() {
- return
- {
- this.props.title} ;
- }
- });
- ReactDOM.render(
- ,
- document.body
- );
getInitialState 方法可以用来设置初始状态
- getInitialState: function() {
- return {
- liked: false
- };
- },
从组件获取真实 DOM 的节点,这时就要用到
属性
- ref
- var MyComponent = React.createClass({
- handleClick: function() {
- this.refs.myTextInput.focus();
- },
- render: function() {
- return (
- ref = "myTextInput" / >this.handleClick
- }
- />
- );
- }
- });
- ReactDOM.render(
- ,
- document.getElementById('example')
- );/
上面代码中,组件
的子节点有一个文本输入框,用于获取用户的输入。这时就必须获取真实的 DOM 节点,虚拟 DOM 是拿不到用户输入的。为了做到这一点,文本输入框必须有一个
- MyComponent
属性,然后
- ref
就会返回这个真实的 DOM 节点。
- this.refs.[refName]
需要注意的是,由于
属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错。上面代码中,通过为组件指定
- this.refs.[refName]
事件的回调函数,确保了只有等到真实 DOM 发生
- Click
事件之后,才会读取
- Click
属性。
- this.refs.[refName]
React 组件支持很多事件,除了
事件以外,还有
- Click
、
- KeyDown
、
- Copy
等,完整的事件清单请查看。
- Scroll
来源: http://www.cnblogs.com/MuYunyun/p/6602433.html