React学习笔记

??

【编码规范】
html标记变量用小写开头
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement,document.getElementById('example'));
React组件用大写开头
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement,document.getElementById('example'));

【JSX原理】
React JSX将一个类似于xml的语法转换成原生态js。xml元素，属性以及子元素都被当成参数传入React.createElement
var Nav;
// Input (JSX):
var app = <Nav color="blue" />;
// Output (JS):
var app = React.createElement(Nav,{color:"blue"});
一个html标记必须对应一个名称相同的变量。

【子元素】
var Nav,Profile;
// Input (JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
// Output (JS):
var app = React.createElement(
  Nav,{color:"blue"},React.createElement(Profile,null,"click")
);
  
【命名空间组件】
如果你要构建一个含有许多子元素的组件，那就用命名空间组件。
var MyFormComponent = React.createClass({ ... });
MyFormComponent.Row = React.createClass({ ... });
MyFormComponent.Label = React.createClass({ ... });
MyFormComponent.Input = React.createClass({ ... });

var Form = MyFormComponent;

var App = (
  <Form>
    <Form.Row>
      <Form.Label />
      <Form.Input />
    </Form.Row>
  </Form>
);
编译后：
var App = (
  React.createElement(Form,React.createElement(Form.Row,React.createElement(Form.Label,null),React.createElement(Form.Input,null)
    )
  )
);

【属性表达式】
使用js表达式作为属性的值，值用花括号引起来
// Input (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
// Output (JS):
var person = React.createElement(
  Person,{name: window.isLoggedIn ? window.name : ''}
);

【Boolean属性】
省略一个属性的值，jsx会把它的值看做是true
// These two are equivalent in JSX for disabling a button
<input type="button" disabled />;
<input type="button" disabled={true} />;

// And these two are equivalent in JSX for not disabling a button
<input type="button" />;
<input type="button" disabled={false} />;

【Child Expressions】
// Input (JSX):
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// Output (JS):
var content = React.createElement(
  Container,window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);

【注释】
var content = (
  <Nav>
    {/* child comment,put {} around */}
    <Person
      /* multi
         line
         comment */
      name={window.isLoggedIn ? window.name : ''} // end of line comment
    />
  </Nav>
);
 
【扩展属性】
  var props = {};
  props.foo = x;
  props.bar = y;
  var component = <Component {...props} />;
  
 【属性覆盖】
 可以给一个元素多次添加相同属性，但是最后一次添加的会覆盖之前的。
 var props = { foo: 'default' };
 var component = <Component {...props} foo={'override'} />;
 console.log(component.props.foo); // 'override'

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!