前端之家收集整理的这篇文章主要介绍了
react 学习笔记,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
理论学习 + demo产出
- class ProductCategoryRow extends React.Component {
- render() {
- return (<tr><th colSpan="2">{this.props.category}</th></tr>);
- }
- }
-
- class ProductRow extends React.Component {
- render() {
- var name = this.props.product.stocked ?
- this.props.product.name :
- <span style={{color: 'red'}}>
- {this.props.product.name}
- </span>;
- return (
- <tr>
- <td>{name}</td>
- <td>{this.props.product.price}</td>
- </tr>
- );
- }
- }
-
- class ProductTable extends React.Component {
- render() {
- var rows = [];
- var lastCategory = null;
- console.log(this.props.inStockOnly)
- this.props.products.forEach((product) => {
- if (product.name.indexOf(this.props.filterText) === -1 || (!product.stocked && this.props.inStockOnly)) {
- return;
- }
- if (product.category !== lastCategory) {
- rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
- }
- rows.push(<ProductRow product={product} key={product.name} />);
- lastCategory = product.category;
- });
- return (
- <table>
- <thead>
- <tr>
- <th>Name</th>
- <th>Price</th>
- </tr>
- </thead>
- <tbody>{rows}</tbody>
- </table>
- );
- }
- }
-
- class SearchBar extends React.Component {
- constructor(props) {
- super(props);
- this.handleFilterTextInputChange = this.handleFilterTextInputChange.bind(this);
- this.handleInStockInputChange = this.handleInStockInputChange.bind(this);
- }
-
- handleFilterTextInputChange(e) {
- this.props.onFilterTextInput(e.target.value);
- }
-
- handleInStockInputChange(e) {
- this.props.onInStockInput(e.target.checked);
- }
-
- render() {
- return (
- <form>
- <input
- type="text"
- placeholder="Search..."
- value={this.props.filterText}
- onChange={this.handleFilterTextInputChange}
- />
- <p>
- <input
- type="checkBox"
- checked={this.props.inStockOnly}
- onChange={this.handleInStockInputChange}
- />
- {' '}
- Only show products in stock
- </p>
- </form>
- );
- }
- }
-
- class FilterableProductTable extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- filterText: '',inStockOnly: false
- };
-
- this.handleFilterTextInput = this.handleFilterTextInput.bind(this);
- this.handleInStockInput = this.handleInStockInput.bind(this);
- }
-
- handleFilterTextInput(filterText) {
- this.setState({
- filterText: filterText
- });
- }
-
- handleInStockInput(inStockOnly) {
- this.setState({
- inStockOnly: inStockOnly
- })
- }
-
- render() {
- return (
- <div>
- <SearchBar
- filterText={this.state.filterText}
- inStockOnly={this.state.inStockOnly}
- onFilterTextInput={this.handleFilterTextInput}
- onInStockInput={this.handleInStockInput}
- />
- <ProductTable
- products={this.props.products}
- filterText={this.state.filterText}
- inStockOnly={this.state.inStockOnly}
- />
- </div>
- );
- }
- }
-
-
- var PRODUCTS = [
- {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'}
- ];
-
- ReactDOM.render(
- <FilterableProductTable products={PRODUCTS} />,document.getElementById('container')
- );
- class CommentList extends React.Component {
- constructor() {
- super();
- this.handleChange = this.handleChange.bind(this);
- this.state = {
- // "DataSource" 就是全局的数据源
- comments: DataSource.getComments()
- };
- }
-
- componentDidMount() {
- // 添加事件处理函数订阅数据
- DataSource.addChangeListener(this.handleChange);
- }
-
- componentWillUnmount() {
- // 清除事件处理函数
- DataSource.removeChangeListener(this.handleChange);
- }
-
- handleChange() {
- // 任何时候数据发生改变就更新组件
- this.setState({
- comments: DataSource.getComments()
- });
- }
-
- render() {
- return (
- <div>
- {this.state.comments.map((comment) => (
- <Comment comment={comment} key={comment.id} />
- ))}
- </div>
- );
- }
- }
-
- class BlogPost extends React.Component {
- constructor(props) {
- super(props);
- this.handleChange = this.handleChange.bind(this);
- this.state = {
- blogPost: DataSource.getBlogPost(props.id)
- };
- }
-
- componentDidMount() {
- DataSource.addChangeListener(this.handleChange);
- }
-
- componentWillUnmount() {
- DataSource.removeChangeListener(this.handleChange);
- }
-
- handleChange() {
- this.setState({
- blogPost: DataSource.getBlogPost(this.props.id)
- });
- }
-
- render() {
- return <TextBlock text={this.state.blogPost} />;
- }
- }
-
- const CommentListWithSubscription = withSubscription(
- CommentList,(DataSource) => DataSource.getComments()
- );
-
- const BlogPostWithSubscription = withSubscription(
- BlogPost,(DataSource,props) => DataSource.getBlogPost(props.id)
- );
- // 函数接受一个组件参数……
- function withSubscription(WrappedComponent,selectData) {
- // ……返回另一个新组件……
- return class extends React.Component {
- constructor(props) {
- super(props);
- this.handleChange = this.handleChange.bind(this);
- this.state = {
- data: selectData(DataSource,props)
- };
- }
-
- componentDidMount() {
- // ……注意订阅数据……
- DataSource.addChangeListener(this.handleChange);
- }
-
- componentWillUnmount() {
- DataSource.removeChangeListener(this.handleChange);
- }
-
- handleChange() {
- this.setState({
- data: selectData(DataSource,this.props)
- });
- }
-
- render() {
- // ……使用最新的数据渲染组件
- // 注意此处将已有的props属性传递给原组件
- return <WrappedComponent data={this.state.data} {...this.props} />;
- }
- };
- }