react 学习笔记

前端之家收集整理的这篇文章主要介绍了react 学习笔记前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
理论学习 + demo产出

  1. class ProductCategoryRow extends React.Component {
  2. render() {
  3. return (<tr><th colSpan="2">{this.props.category}</th></tr>);
  4. }
  5. }
  6.  
  7. class ProductRow extends React.Component {
  8. render() {
  9. var name = this.props.product.stocked ?
  10. this.props.product.name :
  11. <span style={{color: 'red'}}>
  12. {this.props.product.name}
  13. </span>;
  14. return (
  15. <tr>
  16. <td>{name}</td>
  17. <td>{this.props.product.price}</td>
  18. </tr>
  19. );
  20. }
  21. }
  22.  
  23. class ProductTable extends React.Component {
  24. render() {
  25. var rows = [];
  26. var lastCategory = null;
  27. console.log(this.props.inStockOnly)
  28. this.props.products.forEach((product) => {
  29. if (product.name.indexOf(this.props.filterText) === -1 || (!product.stocked && this.props.inStockOnly)) {
  30. return;
  31. }
  32. if (product.category !== lastCategory) {
  33. rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
  34. }
  35. rows.push(<ProductRow product={product} key={product.name} />);
  36. lastCategory = product.category;
  37. });
  38. return (
  39. <table>
  40. <thead>
  41. <tr>
  42. <th>Name</th>
  43. <th>Price</th>
  44. </tr>
  45. </thead>
  46. <tbody>{rows}</tbody>
  47. </table>
  48. );
  49. }
  50. }
  51.  
  52. class SearchBar extends React.Component {
  53. constructor(props) {
  54. super(props);
  55. this.handleFilterTextInputChange = this.handleFilterTextInputChange.bind(this);
  56. this.handleInStockInputChange = this.handleInStockInputChange.bind(this);
  57. }
  58. handleFilterTextInputChange(e) {
  59. this.props.onFilterTextInput(e.target.value);
  60. }
  61. handleInStockInputChange(e) {
  62. this.props.onInStockInput(e.target.checked);
  63. }
  64. render() {
  65. return (
  66. <form>
  67. <input
  68. type="text"
  69. placeholder="Search..."
  70. value={this.props.filterText}
  71. onChange={this.handleFilterTextInputChange}
  72. />
  73. <p>
  74. <input
  75. type="checkBox"
  76. checked={this.props.inStockOnly}
  77. onChange={this.handleInStockInputChange}
  78. />
  79. {' '}
  80. Only show products in stock
  81. </p>
  82. </form>
  83. );
  84. }
  85. }
  86.  
  87. class FilterableProductTable extends React.Component {
  88. constructor(props) {
  89. super(props);
  90. this.state = {
  91. filterText: '',inStockOnly: false
  92. };
  93. this.handleFilterTextInput = this.handleFilterTextInput.bind(this);
  94. this.handleInStockInput = this.handleInStockInput.bind(this);
  95. }
  96.  
  97. handleFilterTextInput(filterText) {
  98. this.setState({
  99. filterText: filterText
  100. });
  101. }
  102. handleInStockInput(inStockOnly) {
  103. this.setState({
  104. inStockOnly: inStockOnly
  105. })
  106. }
  107.  
  108. render() {
  109. return (
  110. <div>
  111. <SearchBar
  112. filterText={this.state.filterText}
  113. inStockOnly={this.state.inStockOnly}
  114. onFilterTextInput={this.handleFilterTextInput}
  115. onInStockInput={this.handleInStockInput}
  116. />
  117. <ProductTable
  118. products={this.props.products}
  119. filterText={this.state.filterText}
  120. inStockOnly={this.state.inStockOnly}
  121. />
  122. </div>
  123. );
  124. }
  125. }
  126.  
  127.  
  128. var PRODUCTS = [
  129. {category: 'Sporting Goods',price: '$49.99',stocked: true,name: 'Football'},{category: 'Sporting Goods',price: '$9.99',name: 'Baseball'},price: '$29.99',stocked: false,name: 'Basketball'},{category: 'Electronics',price: '$99.99',name: 'iPod Touch'},price: '$399.99',name: 'iPhone 5'},price: '$199.99',name: 'Nexus 7'}
  130. ];
  131.  
  132. ReactDOM.render(
  133. <FilterableProductTable products={PRODUCTS} />,document.getElementById('container')
  134. );

  1. class CommentList extends React.Component {
  2. constructor() {
  3. super();
  4. this.handleChange = this.handleChange.bind(this);
  5. this.state = {
  6. // "DataSource" 就是全局的数据源
  7. comments: DataSource.getComments()
  8. };
  9. }
  10.  
  11. componentDidMount() {
  12. // 添加事件处理函数订阅数据
  13. DataSource.addChangeListener(this.handleChange);
  14. }
  15.  
  16. componentWillUnmount() {
  17. // 清除事件处理函数
  18. DataSource.removeChangeListener(this.handleChange);
  19. }
  20.  
  21. handleChange() {
  22. // 任何时候数据发生改变就更新组件
  23. this.setState({
  24. comments: DataSource.getComments()
  25. });
  26. }
  27.  
  28. render() {
  29. return (
  30. <div>
  31. {this.state.comments.map((comment) => (
  32. <Comment comment={comment} key={comment.id} />
  33. ))}
  34. </div>
  35. );
  36. }
  37. }
  38.  
  39. class BlogPost extends React.Component {
  40. constructor(props) {
  41. super(props);
  42. this.handleChange = this.handleChange.bind(this);
  43. this.state = {
  44. blogPost: DataSource.getBlogPost(props.id)
  45. };
  46. }
  47.  
  48. componentDidMount() {
  49. DataSource.addChangeListener(this.handleChange);
  50. }
  51.  
  52. componentWillUnmount() {
  53. DataSource.removeChangeListener(this.handleChange);
  54. }
  55.  
  56. handleChange() {
  57. this.setState({
  58. blogPost: DataSource.getBlogPost(this.props.id)
  59. });
  60. }
  61.  
  62. render() {
  63. return <TextBlock text={this.state.blogPost} />;
  64. }
  65. }
  66.  
  67. const CommentListWithSubscription = withSubscription(
  68. CommentList,(DataSource) => DataSource.getComments()
  69. );
  70.  
  71. const BlogPostWithSubscription = withSubscription(
  72. BlogPost,(DataSource,props) => DataSource.getBlogPost(props.id)
  73. );
  74. // 函数接受一个组件参数……
  75. function withSubscription(WrappedComponent,selectData) {
  76. // ……返回另一个新组件……
  77. return class extends React.Component {
  78. constructor(props) {
  79. super(props);
  80. this.handleChange = this.handleChange.bind(this);
  81. this.state = {
  82. data: selectData(DataSource,props)
  83. };
  84. }
  85.  
  86. componentDidMount() {
  87. // ……注意订阅数据……
  88. DataSource.addChangeListener(this.handleChange);
  89. }
  90.  
  91. componentWillUnmount() {
  92. DataSource.removeChangeListener(this.handleChange);
  93. }
  94.  
  95. handleChange() {
  96. this.setState({
  97. data: selectData(DataSource,this.props)
  98. });
  99. }
  100.  
  101. render() {
  102. // ……使用最新的数据渲染组件
  103. // 注意此处将已有的props属性传递给原组件
  104. return <WrappedComponent data={this.state.data} {...this.props} />;
  105. }
  106. };
  107. }

猜你在找的React相关文章